Question

我的表有一个用于其中一行的嵌套表。我希望两个表占据父元素宽度的100％。我怎么做？

HTML

<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>

Answer 1

Fiddle

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

Answer 2

您没有嵌套表格。您认为tr > td > tr > td无效。另外，第一行没有td元素只需将width: 100%应用于所有表格：

＆＃13;

table {
  background-color: white;
  width: 100%;
}
.requestDetails {
  background-color: red;
}
.container {
  width: 600px;
  background-color: green;
}
.row {
  width: 100%;
  background-color: blue;
}

＆＃13;

<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>

＆＃13;

Answer 3

只需将width: 100%;添加到CSS中的table。

Updated jsFiddle

读取：CSS width | MDN

Answer 4

只需更新您的css，如下所示：

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

Answer 5

如果未设置width属性，则table占用显示表数据所需的空间。所以你必须定义表的宽度。

所以只需在CSS中定义表的宽度。

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

Answer 6

借鉴其他答案，在一个回合的路上，是的，他们确实有一个正确的元素，不幸的是他们都没有完整的故事。

正如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％

但是，我会在这里猜测，并查看你的其他类名（特别是容器和行）我怀疑你可能真的是使用 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>

即使没有添加引导程序，您也会注意到我已经简化了HTML。

为了在每行数据上方找到100％行的效果，您不需要按照自己的方式嵌套，只需要告诉 td 元素，它必须跨越多少列，只要它等于表的其余部分，您将在不同的列中以100％宽度的标头结束，如果您决定使用Bootstrap，然后BS将照顾给你100％的桌子宽度，否则正如其他人提到的那样只需添加宽度为＆＃34; 100％＆＃34;到控制表本身的类。

附加（但不是解决问题所必需的）

如果你决定使用Bootstrap作为你的CSS框架，你可以通过另一种方式实现你想要实现的目标，以及使用BS3网格系统。

使用＆＃39;容器＆＃39; ，＆＃39;行＆＃39; 和＆＃39; col-md-xx＆＃39; 样式类，您可以非常轻松地执行以下操作：

<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，并且可以根据需要轻松重复＆lt; div＆＃39; 部分以便根据需要生成尽可能多的行。

最后，如果您在最外层的div中使用＆＃39; container-fluid＆＃39; 而不是＆＃39; ，那么您的布局将跨越可见页面的整个宽度。

然而，关于启动root的最好的部分是，你使用它做的所有事情都是自动响应的，因此会适应，并根据需要自动重新调整移动和桌面的大小，特别是如果你开始使用混合＆＃39; col-xx-yy＆＃39; 列类型，其中xx表示设备目标大小，yy表示您希望使用的网格列数。

如何使html表占用父元素宽度的100％？

6 个答案:

附加（但不是解决问题所必需的）