css 如何使html表格占父元素宽度的100%?

yftpprvb  于 2023-01-18  发布在  其他
关注(0)|答案(6)|浏览(320)

我的表的一行有一个嵌套表。我希望两个表都占父元素宽度的100%。我该怎么做?
Demo
超文本标记语言

<div class="container">
<table>
   <tr class="row">
    row 1
   </tr>
<tr class="requestDetails row">
      <td>
            <tr class="requestDetailsHeading">
            <td>Headingname</td>

            </tr>
            <tr class="requestRow">
            <td>name</td>
            <td>date</td>
            <td>age</td>
            </tr>
    </td>
</tr>
  <tr class="row">
            <td>gg</td>
            <td>dd</td>
            <td>ee</td>
        </tr>
    </table>
r1wp621o

r1wp621o1#

借鉴其他的答案,以一种迂回的方式,是的,他们确实有一个正确的元素,不幸的是,他们都没有完整的故事。
正如Justinas所指出的,你嵌套的不是表格,而是行。虽然行嵌套确实可以工作,但实际上在新的HTML5方案下现在不支持它。
这意味着尝试执行您正在执行的操作时,将无法验证,更糟糕的是,将拒绝在移动的设备上正确呈现。
使用现有代码:

<div class="container">
  <table>
    <tr class="row">
      row 1
    </tr>
    <tr class="requestDetails row">
      <td>
        <tr class="requestDetailsHeading">
          <td>Headingname</td>
        </tr>
        <tr class="requestRow">
          <td>name</td>
          <td>date</td>
          <td>age</td>
        </tr>
      </td>
    </tr>
    <tr class="row">
      <td>gg</td>
      <td>dd</td>
      <td>ee</td>
    </tr>
  </table>
</div>

正如其他人已经指出的那样,您可以通过向表格样式添加宽度为100%的内容,并向 requestDetailsHeading 类添加宽度:100%的内容来实现您所尝试做的事情。
不过,我还是要做一个猜测,看看你的其他类名(特别是 containerrow),我怀疑你实际上可能使用的是Bootstrap CSS框架。如果你不是,那么也许你可以考虑这样做,因为它会让你尝试做的任务更容易,你会有更少的摆弄。
您可以从下载各种CSS文件

http://getbootstrap.com/

一旦你有一个页面设置与BS到位,你可以得到确切的效果,你想要使用以下HTML

<div class="container">
  <table class="table">
    <tr> <!-- NOTE: Don't use the 'row' class here as BS3 has another use for that -->
      <td colspan="3">
        row 1
      </td>
    </tr>
    <tr class="requestDetailsHeading">
      <td colspan="3">HeadingName</td>
    </tr>
    <tr class="requestRow">
      <td>Name</td>
      <td>Date</td>
      <td>Age</td>
    </tr>
    <tr class="requestData">
      <td>gg</td>
      <td>dd</td>
      <td>ee</td>
    </tr>
  </table>
</div>

但是,即使没有添加 Bootstrap ,您也会注意到我已经简化了HTML。
要获得您所期望的100%行的效果,在每行数据之上,您不需要像之前那样嵌套,您只需要告诉 td 元素它必须跨越多少列,并且只要它等于表的其余部分,您将在单独的列之间得到一个100%宽度的标题。那么BS将负责给你一个100%的表格宽度,否则就像其他人提到的那样,简单地给一个控制表格本身的类添加一个“100%”的宽度。

附加(但不是解决问题所必需的)

如果您决定使用Bootstrap作为CSS框架,还有另一种方法可以实现您想要实现的目标,那就是使用BS 3网格系统。
使用**'container's、'row's和'col-md-xx'**样式类,您可以非常容易地执行以下操作:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      Row Header Text Goes Here
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">Name</div>
    <div class="col-md-4">Date</div>
    <div class="col-md-4">Age</div>
  </div>
  <div class="row">
    <div class="col-md-4">gg</div>
    <div class="col-md-4">dd</div>
    <div class="col-md-4">ee</div>
  </div>
</div>

由于Bootstrap的工作方式,容器将自动占据100%的中心列(约1024像素),并且您的每一行将在默认情况下可用的12列网格中占据适当的空间。
您的数据行被设置为4个网格的列宽,因为3乘以4等于12,并且可以根据需要轻松地重复 'div' 部分,以生成所需数量的行。
最后,如果在最外层的div中使用 'container-fluid' 而不是 'container',那么布局将跨越可见页面的整个宽度。
然而,使用 Bootstrap 最好的地方在于,您使用它所做的一切都是自动响应的,因此将根据需要自动适应移动的和桌面,并自动调整大小,特别是如果您开始使用 'col-xx-yy' 列类型的混合,其中xx表示设备目标大小,yy表示您希望使用的网格列数。

bvjveswy

bvjveswy2#

Fiddle

table{
    background-color:white;
    width:100%;
}
x7yiwoj4

x7yiwoj43#

你没有嵌套表。你有tr > td > tr > td,我认为它是无效的。而且,第一行没有td元素。
只需将width: 100%应用于所有表:

table {
  background-color: white;
  width: 100%;
}
.requestDetails {
  background-color: red;
}
.container {
  width: 600px;
  background-color: green;
}
.row {
  width: 100%;
  background-color: blue;
}
<div class="container">
  <table>
    <tr class="row">
      row 1
    </tr>
    <tr class="requestDetails row">
      <td>
        <tr class="requestDetailsHeading">
          <td>Headingname</td>

        </tr>
        <tr class="requestRow">
          <td>name</td>
          <td>date</td>
          <td>age</td>
        </tr>
      </td>
    </tr>
    <tr class="row">
      <td>gg</td>
      <td>dd</td>
      <td>ee</td>
    </tr>
  </table>
</div>
3mpgtkmj

3mpgtkmj4#

只需将width: 100%;添加到CSS中的table
Updated jsFiddle
读数:CSS width | MDN

fnatzsnv

fnatzsnv5#

只需更新您的CSS如下:

.container table{
    background-color:white;
    width:100%;
}
b1payxdu

b1payxdu6#

如果没有设置width属性,table将占用显示表数据所需的空间,因此必须定义table的宽度。
所以只需要在CSS中定义表格的宽度。

.row, table{
width:100%;
background-color:blue;
 }

相关问题