HTML 表格 - 更改列中单个单元格的宽度

Question

HTML 表格 - 更改列中单个单元格的宽度

有没有更优雅的解决方案来达到与此相同的效果？

一列中具有不同单元格宽度的 HTML 表格

我到目前为止的代码是这样的：

<!DOCTYPE html>
<html>
  <head>
    <title>Table Test</title>
    <style type="text/css">
      table { border-collapse: collapse; }
      td { border: solid 1px; }
      td.nest { padding: 0px; }
      td.nest table td { border-width: 0px 1px; }
      td.nest table td:first-child { border-left: none; }
      td.nest table td:last-child { border-right: none; }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col style="width: 3em;"/>
        <col style="width: 6em;"/>
        <col style="width: 9em;"/>
      </colgroup>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><!-- Somehow get rid of the nested table and keep just the tds -->
        <td class="nest" colspan="3">
          <table>
            <tr>
              <td style="width: 4em;">1</td>
              <td style="width: 6em;">2</td>
              <td style="width: 8em;">3</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

到目前为止，我可以让这个工作的唯一方法是在第一个表中嵌套另一个表。我不太喜欢它，因为理想情况下我只想要一个表格，并且有很多额外的 CSS 来匹配第一个表格的边框而不增加单元格 ( colspan="3") 的大小。我希望能够用其中<tr>包含三个<td>s的法线替换嵌套表。

我发现在不影响列中其他单元格的情况下更改一个单元格的宽度的唯一另一种方法是 withposition: absolute;但随后行中的下一个单元格向左移动了调整后的单元格的宽度，因此不会'充分发挥作用。使宽度恰到好处也太难了。

那么，有没有什么方法可以只使用一张表，不使用额外的<div>s 等，只使用简单的 CSS来获得相同的效果？这个例子应该只有一个<table>，九个<td>，没有colspan=。如果存在，我正在寻找一种纯 CSS 解决方案。只要它们加起来等于原始宽度，它应该能够处理任何任意宽度。

Answer 1

Ste*_*ger 2

不，如果没有子表，这是不可能的。
您试图做的事情违背了表格数据表示的想法。
如果你不需要桌子，就不要使用桌子。

但是，您可以将数据放入 div 中 style="display: table-cell;"。

再想一想，您可以在所有 3 行中使用 colspan。
所以你的表实际上看起来像这样：

科尔斯潘

 <col style="width: 3em;"/>
 <col style="width: 1em;"/>
 <col style="width: 5em;"/>
 <col style="width: 1em;"/>
 <col style="width: 8em;"/>




<!DOCTYPE html>
<html>
  <head>
    <title>Table Test</title>
      <style type="text/css">
          table {
              border-collapse: collapse;
          }

          td {
              border: solid 1px;
          }

        td.nest {
            padding: 0px;
        }

        td.nest table td {
            border-width: 0px 1px;
        }

        td.nest table td:first-child {
            border-left: none;
        }

        td.nest table td:last-child {
            border-right: none;
        }
    </style>
</head>
<body>

    <table >
        <colgroup>
            <col style="width: 3em;" />
            <col style="width: 1em;" />
            <col style="width: 5em;" />
            <col style="width: 1em;" />
            <col style="width: 8em;" />
        </colgroup>
        <tr>
            <td>1</td>
            <td colspan="2">2</td>
            <td colspan="2">3</td>
        </tr>
        <tr>
            <td colspan="2">1</td>
            <td colspan="2">2</td>
            <td>3</td>
        </tr>

        <tr>
            <td>1</td>
            <td colspan="2">2</td>
            <td colspan="2">3</td>
        </tr>
    </table>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，3 月前
查看次数：	24334 次
最近记录：	4 年，9 月前