Question

我使用colspan元素按照我想要的方式正确格式化了HTML表格。然而，我还想要占用多个列的元素在列边界（在跨区元素内）具有某种边界或除法。这样做的目的是使用户可以轻松查看跨区元素占用的列数。

例如，如果表中的元素占用一行和4列，则元素中可能有三个分区。谢谢。

<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）并不明显。如果元素中仍然存在一些列边界，则用户可以清楚地看到这一点，而不必查看相邻单元格的颜色变化或必须引用表格标题。

Answer 1

非常快速的例子 - 只是想知道我的意思。

像这样的东西，那么你可以按照你的意愿设计你的div - 不确定你需要的东西

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

Answer 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

colspan html表元素内的边界分区

2 个答案: