Question

这很奇怪，我甚至会说这是不可能的。

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

我想要

第一栏10％
第二+第三+第四列占宽度的45％
第五+第六+第七列占宽度的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>

但这太丑了。

Answer 1

现已根据HTML5弃用width或td上的

th属性

你可以在CSS上这样做：

table td {
    width: 10%;
}

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

更新：

在你的情况下，第一列似乎是10％，其余的则是15％。使用这样的东西：

table td {
    width: 15%;
}

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

Answer 2

是的，有可能..查看width的{{1}}属性。

Answer 3

怎么样：

<table style="width: 100%;">
        <tr>
            <td style="width: 10%;"></td>
            <td style="width: 45%;">
                <table style="width: 100%;">
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table style="width: 100%;">
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

Answer 4

使用以某些宽度设置的表格列的这些链接：

http://www.w3.org/wiki/Styling_tables

http://www.web-source.net/web_design_tips/setting_html_table_column_widths.htm#.UvnvHfmSw3I

td或th上的Width属性现已根据HTML5弃用

你可以在CSS上这样做：

table {
  width: 100%;
  border: 1px solid #000;
}
th, td {
  text-align: left; 
  vertical-align: top; 
  border: 1px solid #000;
  border-collapse: collapse;
  padding: 0.3em;
  caption-side: bottom;
}

th:first-child, td:first-child{ 
  width: 10%;
}

th.width-th, td.width-td{
  width: 45%;
}

caption {
  padding: 0.3em;
}

HTML CODE：

<table BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
    <thead>
        <tr>
            <th>Volcano Name</th>
            <th class="width-th">Location</th>
            <th class="width-th">Last Major Eruption</th>
            <th class="width-th">Type of Eruption</th>
        <th class="width-th">Volcano Name</th>
            <th class="width-th">Location</th>
            <th class="width-th">Last Major Eruption</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Mt. Lassen</th>
            <td class="width-td">California</td>
            <td class="width-td">1914-17</td>
            <td class="width-td">Explosive Eruption</td>
        <th class="width-td">Mt. Lassen</th>
            <td class="width-td">California</td>
            <td class="width-td">1914-17</td>
        </tr>
    </tbody>
</table>

Answer 5

不幸的是，似乎无法设置列宽以使一列为10％，两列三列各为45％，每组中的列在可用空间内采用“自然”宽度（使用浏览器根据细胞的widh要求分配的宽度），这似乎是个问题。

如果问题被解释为在组内，各个列的宽度可以用任何合适的方式设置，比如宽度相等，那么答案几乎是微不足道的：假设它是明确的只有表格，并且所有单元格都是td元素，您可以设置

<style>
table { table-layout: fixed }
td { width: 15% }
td:first-child { width: 10% }
</style>

但是如果每个组内的分配都应该灵活，那么似乎没有办法。使用colgroup无效，因为在width上设置colgroup不会设置组的宽度，而是设置其中每列的宽度！

使用@ am1r_5h的答案中概述的嵌套表，您可以获得所需的分配但是对于不同的结构（包含两个3列表的3列表）。这是否满足您的需求取决于背景和目的;它肯定会引入可访问性问题（并且可能使其他样式更难）。

如果真的重要，你可以使用JavaScript来创建一个“虚拟”表，其中包含真实表的所有数据，如上所述组织成嵌套表，以获得宽度。内部表的列，并根据它们设置真实表的列的宽度。您将保持“虚拟”表不可见，并在获得宽度后立即将其删除。

表列设置有一些宽度

5 个答案: