设置 <table> 格式的最佳方法是啥？ [关闭]

Posted 2023-03-06

【中文标题】设置 <table> 格式的最佳方法是啥？ [关闭]

【英文标题】：What is the best way to set <table> format? [closed]设置 <table> 格式的最佳方法是什么？ [关闭]

【发布时间】：2016-11-23 15:52:05

【问题描述】：

演示代码： <table> <tr> <tr>111</tr> <tr>222</tr> <tr>333</tr> <tr>444</tr> <tr>555</tr> <tr>666</tr> </tr> </table>

我希望在不改变唯一 CSS 使用的 HTML 的情况下输出链接： 111 222 333 444 555 666

谁能帮帮我？

【问题讨论】：

曾经

看看这个developer.mozilla.org/en-US/docs/Web/html/Element/table

【参考方案1】：

演示代码：

<table>
 <tr>
  <td>111</td>
  <td>222</td>
  <td>333</td>
 </tr>
 <tr>
  <td>444</td>
  <td>555</td>
  <td>666</td>
 </tr>
</table>

【参考方案2】：

tr 
  display: block;
  float: left;

tr:nth-child(3) 
 float: none;

TR 代替 TD（HTML 更改）

【讨论】：

一个 TR 在另一个 TR 中是错误的，所以我认为 HTML 中存在错误

【参考方案3】：

我想你真正的 HTML 代码是：

<table>
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
    <td>666</td>
  </tr>
</table>

通过使用这个 CSS：

td 
  display: block;
  float: left;

td:nth-child(3) 
  float: none;

您无需更改 HTML 即可获得所需的内容

【讨论】：

我无法得到上面输出中提到的结果

@yahil-madakiya 我在这里添加了一个 codepen 示例：codepen.io/kaosmos/pen/wWmaVp?editors=1100#0

【参考方案4】：

示例 HTML：

 <table>
    <tr>
    <th>Col1</th>
    <th>Col2</th>
    <th>Col3</th>
    <th>Col4</th>
    <th>Col5</th>
    <th>Col6</th>
        <td>111</td>
        <td>222</td>
        <td>333</td>
        <td>444</td>
        <td>555</td>
        <td>666</td>
    </tr>
</table>

对于 CSS：

th 
  background-color: #000000;
  color: #ffffff;


th, tr 
  border: 1px solid #000000;

【讨论】：

我知道，但在我的情况下，我不能改变我的 HTML 格式，任何其他方式来设置相同的 HTML 和上面提到的使用 CSS？

【参考方案5】：

试试这个：

<table>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>555</td>
<td>666</td>
</tr>

【讨论】：

我无法得到上面输出中提到的结果

以上输出是什么意思，如果你详细说明，我可以帮你解决。