logo标签列表

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

htmlcsshtml-table
7
有没有更优雅的解决方案来实现与这个相同的效果？
我已经编写了以下代码：
<!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>

到目前为止，我能够让它工作的唯一方法是在第一个表格内嵌套另一个表格。虽然这不是很理想，因为我只想要一个表格，而且还需要大量额外的CSS来匹配第一个表格的边框，而不增加单元格（colspan="3"）的大小。我想用一个普通的<tr>替换嵌套的表格，里面有三个<td>。
我发现的唯一另一种改变一个单元格的宽度而不影响列中其他单元格的方法是使用position: absolute;，但是这样会使行中的下一个单元格向左移动调整后的单元格的宽度，所以这并不完全可行。而且很难把宽度调整得恰到好处。
那么，有没有办法只使用一个表格，没有额外的<div>等，只用简单的CSS就能达到相同的效果呢？这个例子应该只有一个<table>，九个<td>，没有colspan=。如果有纯CSS解决方案，它应该能够处理任意宽度，只要它们加起来等于原始宽度。
4个回答
2
不行，没有子表格是不可能的。 您想做的事情违反了表格数据呈现的原则。 如果您不想要一个表格，请不要使用表格。
但是，您可以将数据放入
中，并使用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>
我没有要求使用colspan，因为表格可能非常大；我需要很多列和计算才能使其正确显示。想象一下在一个10列100行的表格上这样做。我事先不知道每个单元格的宽度，只知道可以覆盖默认宽度。另一个优点是我可以一次性写出整个表格，而不是获取每一行，计算我需要的列数并对所有单元格进行colspan操作。我甚至可以使用table-layout: fixed;。 - CJ Dennis
1

是的...但你需要使用一些CSS技巧来“伪造”。

以下代码使用伪元素来设置内部边框，并根据中间行适当地进行偏移。

演示 Fiddle

CSS

  table {
      border-collapse: collapse;
      table-layout:fixed;
  }
  td {
      border: solid 1px;
      border-width:1px 0px 1px 0px;
      width:33%;
      position:relative;
  }
  td:nth-child(1) {
      border-left: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;
  }
  td:after {
      content:'';
      position:absolute;
      right:0;
      border-right:1px solid black;
      top:0;
      bottom:0;
  }
  tr:nth-child(2) td:nth-of-type(1):after, tr:nth-child(2) td:nth-of-type(2):after {
      right:-20px;
  }
  tr:nth-child(2) td:nth-of-type(2), tr:nth-child(2) td:nth-of-type(3) {
      padding-left:25px;
  }

HTML

<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>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
我仍在努力理解你的代码是如何工作的，但这太棒了！我删除了你的 width:33%;，结果输出与我的代码相同！ - CJ Dennis
:after 是一个伪元素，您可以对其进行样式设置，它会出现在应用 CSS 的 DOM 元素“之后”（同样适用于 :before），通过对其进行样式设置，您可以模拟边框效果。 - SW4
我已经尝试了你的解决方案，它只是调整了单元格边框的外观，而单元格本身的大小仍然保持不变，但内部填充增加了，减少了文本的可用空间。我希望它能够实际上改变单元格的大小（即将单元格边界向左或向右移动）。 - CJ Dennis
@CJDennis - 不太确定我理解了你的意思：http://jsfiddle.net/46rmP/2/ - 你可能想要发布一个新问题以获得更多关注。 - SW4
0
你可以使用下面的 HTML 作为示例：
<table style="width: 300px;">
    <colgroup>
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
    </colgroup>
    <tbody>
        <tr>
            <td></td>
            <td colspan="3"></td>
            <td colspan="2"></td>            
        </tr>
        <tr>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td></td>       
        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>      
        </tr>
    </tbody>
</table>
2
感谢您提供这段代码片段，它可能会提供一些有限的、即时的帮助。通过展示为什么这是一个好的解决方案，适当的解释将极大地提高其长期价值，并使其对未来具有类似问题的读者更有用。请编辑您的答案，添加一些解释，包括您所做的假设。 - Toby Speight
0

你必须使用百分比单位而不是像素，这对我很有效。

width:30%
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接