colspan html表格元素内的边框划分答案

【问题标题】：border divisions inside colspan html table elementcolspan html表格元素内的边框划分
【发布时间】：2013-08-11 03:16:45
【问题描述】：

我有一个使用 colspan 元素按照我想要的方式正确格式化的 HTML 表格。然而，我还想要的是占据多列的元素在列边界（在跨元素内）具有某种边界或划分。这样做的目的是让用户很容易看到一个跨越的元素占据了多少列。

例如，如果表格中的一个元素占用 1 行 4 列，则该元素内可能有 3 个分区。谢谢。

<div id="debug_con">
    <h2>Debug Modes</h2>
    <table class="debug">
      <tr>
        <th>Group Name</th>
        <th>Width</th>
        <th>Type</th>
        <th>Group Address (dec)</th>
        <th>Group Address (in HEX)</th>
        <th>GPIO7</th>
        <th>GPIO6</th>
        <th>GPIO5</th>
        <th>GPIO4</th>
        <th>GPIO3</th>
        <th>GPIO2</th>
        <th>GPIO1</th>
        <th>GPIO0</th>
      </tr>
      <tr class="W">
        <td>debug_1</td>
        <td>8</td>
        <td>output</td>
        <td>0</td>
        <td>0x0</td>
        <td class="col1" colspan="8">demod_out</td>
      </tr>
      <tr class="W">
        <td>debug_2</td>
        <td>8</td>
        <td>output</td>
        <td>1</td>
        <td>0x1</td>
        <td class="col1" colspan="8">afc_out</td>
      </tr>
      <tr class="R">
        <td>debug_combo</td>
        <td>8</td>
        <td>input</td>
        <td>2</td>
        <td>0x2</td>
        <td class="col1" colspan="4">this_upper</td>
        <td class="col2" colspan="4">this_lower</td>
      </tr>
      <tr class="R">
        <td>n_word</td>
        <td>8</td>
        <td>input</td>
        <td>3</td>
        <td>0x3</td>
        <td class="col1" colspan="8">n_word</td>
      </tr>
      <tr class="W">
        <td>write_combo</td>
        <td>8</td>
        <td>output</td>
        <td>5</td>
        <td>0x5</td>
        <td class="unallocated" colspan="5">unallocated</td>
        <td class="col1" colspan="1">Bit_2</td>
        <td class="col2" colspan="1">Bit_1</td>
        <td class="col1" colspan="1">Bit_0</td>
      </tr>
      <tr class="W">
        <td>spi_debug</td>
        <td>8</td>
        <td>output</td>
        <td>6</td>
        <td>0x6</td>
        <td class="unallocated" colspan="6">unallocated</td>
        <td class="col1" colspan="1">spi_error</td>
        <td class="col2" colspan="1">spi_flag</td>
      </tr>
      <tr class="W">
        <td>OCL_GRP1</td>
        <td>8</td>
        <td>output</td>
        <td>8</td>
        <td>0x8</td>
        <td class="unallocated" colspan="6">unallocated</td>
        <td class="col1" colspan="1">ocl_dig_static_cal_meas_output_q</td>
        <td class="col2" colspan="1">ocl_dig_static_cal_meas_output_i</td>
      </tr>
      <tr class="W">
        <td>OCL_GRP2</td>
        <td>8</td>
        <td>output</td>
        <td>9</td>
        <td>0x9</td>
        <td class="unallocated" colspan="1">unallocated</td>
        <td class="col1" colspan="6">dig_ocl_controller_output_mag_i</td>
        <td class="col2" colspan="1">dig_ocl_controller_output_sign_i</td>
      </tr>
      <tr class="W">
        <td>OCL_GRP3</td>
        <td>8</td>
        <td>output</td>
        <td>10</td>
        <td>0xa</td>
        <td class="unallocated" colspan="1">unallocated</td>
        <td class="col1" colspan="6">dig_ocl_controller_output_mag_q</td>
        <td class="col2" colspan="1">dig_ocl_controller_output_sign_q</td>
      </tr>
      <tr class="W">
        <td>OCL_GRP4</td>
        <td>8</td>
        <td>output</td>
        <td>11</td>
        <td>0xb</td>
        <td class="col1" colspan="3">oscl_sar_core_state_q</td>
        <td class="col2" colspan="3">oscl_sar_core_state_i</td>
        <td class="col1" colspan="1">ocl_static_cal_pga_calibration_ready_q</td>
        <td class="col2" colspan="1">ocl_static_cal_pga_calibration_ready_i</td>
      </tr>
      <tr class="W">
        <td>OCL_GRP5</td>
        <td>8</td>
        <td>output</td>
        <td>12</td>
        <td>0xc</td>
        <td class="unallocated" colspan="2">unallocated</td>
        <td class="col1" colspan="6">fsm_idac_input_code_i</td>
      </tr>
      <tr class="W">
        <td>OCL_GRP6</td>
        <td>8</td>
        <td>output</td>
        <td>13</td>
        <td>0xd</td>
        <td class="unallocated" colspan="2">unallocated</td>
        <td class="col1" colspan="6">fsm_idac_input_code_q</td>
      </tr>
      .....etc.....

我今天学到了很多 jsfiddle 很棒！好的，我有一个 jsfiddle（感谢 Alex 的建议），它显示了当前表格的呈现方式。例如，如果您可以在表中看到 fsm_idac_input_code_i，则该元素占用多少列 (GPIO) 并不明显。如果元素内还有一些列边框，那么用户可以清楚地看到这一点，而无需查看相邻单元格的颜色变化或不必参考表格标题。

【问题讨论】：

你可以在 colspan td 中使用 div 来分隔元素吗？还是只需要使用表格？
请输入您尝试过的代码，以便我们看到您的结构
嗨，Alex，感谢您的建议，您能否详细说明一下您的意思。也许是一个班轮的例子。

标签： html border html-table division

【解决方案1】：

非常简单的示例 - 只是为了说明我的意思。

像这样，然后您可以根据需要设置 div 的样式 - 不确定是否是您需要的

    <td class="col1" colspan="1">
           <div>
               spi_error
            </div>
           <div>
               spi_error2
            </div>
    </td>

【讨论】：

嗯，这样做的最大动机是某些表格元素可能像 6 列一样宽。当用户在浏览器中查看表格时，如果不查看相邻行，他/她将无法知道实际占用了多少列。我将使用 sn-p 编辑我的问题，显示我的表格当前是如何呈现的，希望能帮助我更好地解释我的意思。
如果你能把 jsfiddle 做得更好
我只是想，如果你想把它们分开，为什么你不保留没有 colspan 的 td 并放置不同的 bg 颜色或边框。？
这是 div 的想法，但它很愚蠢 - 如果你想将它们分开，你可以在没有 colspan 的情况下保留你的 td jsfiddle.net/G8vH9/1
您好，我决定采用惰性方法，将宽度包含在表格数据本身中，即不使用 CSS 表示宽度，仅在文本中表示宽度。我认为我目前无法使用 CSS 获得我正在寻找的结果。

【解决方案2】：

您可以在不更改现有布局的情况下完成此操作。

这会为所有colspan 大于 1 的单元格提供红色边框：

td[colspan] {
  border: 2px solid red;
}

td, td[colspan="1"] {
  border: 1px solid gray;
}

Fiddle 1

您甚至可以在将鼠标悬停在单元格上时显示 colspan 值：

td::before {
  content: "1:";
  position: absolute;
  display: none;
  left: 0;
  top: 0em;
  padding: 0.2em;
  color: red;
}

td[colspan="2"]::before {content: "2:";}
td[colspan="3"]::before {content: "3:";}
td[colspan="4"]::before {content: "4:";}
td[colspan="5"]::before {content: "5:";}
td[colspan="6"]::before {content: "6:";}
td[colspan="7"]::before {content: "7:";}
td[colspan="8"]::before {content: "8:";}

td:hover {
  padding-left: 1.5em;
}

td:hover::before {
  display: block;
}

Fiddle 2

【讨论】：