html - 设置了一定宽度的表格列

标签 html css

这很奇怪,我什至会说这是不可能的。

我有一个包含 7 列的表格。我想要

  1. 第一列占 10%
  2. 第二+第三+第四列占宽度的45%
  3. 第五+第六+第七列占宽度的45%

这可能吗?

我可以这样做:

<html>
  <head>
    <style>
      td {border:1px solid #000}
    </style>
  </head>

  <body>
    <table style="width:100%">
      <tr>
        <td>1</td>
        <td>very big text </td>
        <td>very big text never</td>
        <td>very big text never ending</td>
        <td>small</td>
        <td>small text</td>
        <td>small text foo</td>
      </tr>
      <!--<tr style="visibility:hidden"> to substitute -->
      <tr>
        <td style="width:10%"></td>
        <td colspan="3" style="width:45%"></td>
        <td colspan="3" style="width:45%"></td>
      </tr>
    </table>
  </body>
</html>

但这太丑了。

最佳答案

tdth 上的

width 属性现已根据 HTML5 弃用

你可以像这样在 CSS 上做到这一点:

table td {
    width: 10%;
}

宽度测量的分区现在是你的工作

更新:

在您的情况下,第一列似乎为 10%,其余列为 15%。使用这样的东西:

table td {
    width: 15%;
}

table td:first-child {
    width: 10% !important;
}

关于html - 设置了一定宽度的表格列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21697744/

相关文章:

html - 根据内容大小进行翻译

javascript - 从外部 LAN 访问网络摄像机,无需端口转发

html - <td> 在不同的 <tr> 中宽度不同

javascript - 在相对于容器 div 的文本顶部堆叠 div

html - 导航不会触及屏幕底部

html - 在 CSS 中解开三 Angular 形的 secret

javascript - 从 textarea 复制到 div,保留换行符

html - CSS从图像条中提取图像

html - 在设置三列页脚样式时遇到问题(页脚标签内的 div?)

html - 如何在 twitter bootstrap 水平表单中正确放置警告/错误消息(在输入的右侧)?