我的表的一行有一个嵌套表。我希望两个表都占父元素宽度的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>
6条答案
按热度按时间r1wp621o1#
借鉴其他的答案,以一种迂回的方式,是的,他们确实有一个正确的元素,不幸的是,他们都没有完整的故事。
正如Justinas所指出的,你嵌套的不是表格,而是行。虽然行嵌套确实可以工作,但实际上在新的HTML5方案下现在不支持它。
这意味着尝试执行您正在执行的操作时,将无法验证,更糟糕的是,将拒绝在移动的设备上正确呈现。
使用现有代码:
正如其他人已经指出的那样,您可以通过向表格样式添加宽度为100%的内容,并向 requestDetailsHeading 类添加宽度:100%的内容来实现您所尝试做的事情。
不过,我还是要做一个猜测,看看你的其他类名(特别是 container 和 row),我怀疑你实际上可能使用的是Bootstrap CSS框架。如果你不是,那么也许你可以考虑这样做,因为它会让你尝试做的任务更容易,你会有更少的摆弄。
您可以从下载各种CSS文件
一旦你有一个页面设置与BS到位,你可以得到确切的效果,你想要使用以下HTML
但是,即使没有添加 Bootstrap ,您也会注意到我已经简化了HTML。
要获得您所期望的100%行的效果,在每行数据之上,您不需要像之前那样嵌套,您只需要告诉 td 元素它必须跨越多少列,并且只要它等于表的其余部分,您将在单独的列之间得到一个100%宽度的标题。那么BS将负责给你一个100%的表格宽度,否则就像其他人提到的那样,简单地给一个控制表格本身的类添加一个“100%”的宽度。
附加(但不是解决问题所必需的)
如果您决定使用Bootstrap作为CSS框架,还有另一种方法可以实现您想要实现的目标,那就是使用BS 3网格系统。
使用**'container's、'row's和'col-md-xx'**样式类,您可以非常容易地执行以下操作:
由于Bootstrap的工作方式,容器将自动占据100%的中心列(约1024像素),并且您的每一行将在默认情况下可用的12列网格中占据适当的空间。
您的数据行被设置为4个网格的列宽,因为3乘以4等于12,并且可以根据需要轻松地重复 'div' 部分,以生成所需数量的行。
最后,如果在最外层的div中使用 'container-fluid' 而不是 'container',那么布局将跨越可见页面的整个宽度。
然而,使用 Bootstrap 最好的地方在于,您使用它所做的一切都是自动响应的,因此将根据需要自动适应移动的和桌面,并自动调整大小,特别是如果您开始使用 'col-xx-yy' 列类型的混合,其中xx表示设备目标大小,yy表示您希望使用的网格列数。
bvjveswy2#
Fiddle
x7yiwoj43#
你没有嵌套表。你有
tr > td > tr > td
,我认为它是无效的。而且,第一行没有td
元素。只需将
width: 100%
应用于所有表:3mpgtkmj4#
只需将
width: 100%;
添加到CSS中的table
。Updated jsFiddle
读数:CSS width | MDN
fnatzsnv5#
只需更新您的CSS如下:
b1payxdu6#
如果没有设置width属性,table将占用显示表数据所需的空间,因此必须定义table的宽度。
所以只需要在CSS中定义表格的宽度。