css - 相同宽度 TR 内的不同 TD 宽度

标签 css html dom html-table

我有一个要修改的表。每行有两行和两列。 所以第一行有两个单元格,其中第一个单元格有 70% 的宽度,第二个单元格有父表的 30%。第二行有两个单元格,其中第一个单元格有 60% 的宽度,第二个单元格拥有父表的 40%。尽管我明确说明了宽度,但为什么第二行吸收了第一行的特征?

这是代码。为什么它不能按我想要的方式工作?

<!DOCTYPE html>
<html>
<body>

<table style="border:1px black;width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td style="width:70%">January</td>
    <td style="width:30%">$100</td>
  </tr>
    <td style="width:60%">feb</td>
    <td style="width:40%">$100</td>
  </tr>
</table>

</body>
</html>

最佳答案

对于第一列 (<td width="70%">)您已设置宽度 = 70%,并且在第二行第一列中您已设置列宽度 = 60%。

注意:在表格中最高列宽自动应用于同一列。在你的情况下,表的第一列对于两行都是 70%,即使你对第二行第一列使用了 60%。

关于css - 相同宽度 TR 内的不同 TD 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17981469/

相关文章:

javascript - 获取缩放图像的高度

css - 将 "fixed position"添加到我的侧边栏是错误定​​位元素,如何解决?

css - 如何以可读格式打开css文件

javascript - 帮助!? IE9 : onChange event doesn't fire when value is modified by an onkeydown script and user tabs away

javascript - 在表格末尾追加一个不同颜色的新行

javascript - 独立对父/子元素执行操作

css - 用 Jawr 处理 CSS

javascript - 使用 R 读取动态 HTML 元素

javascript - 如何序列化包含 Shadow DOM 的 HTML DOM?

javascript - 使用javascript显示在列表项点击时显示下拉内容的div