0

我有一个使用 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) 并不明显。如果元素内还有一些列边框，那么用户可以清楚地看到这一点，而无需查看相邻单元格的颜色变化或不必参考表格标题。

4

2 回答 2

0

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

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

    <td class="col1" colspan="1">
           <div>
               spi_error
            </div>
           <div>
               spi_error2
            </div>
    </td>
于 2013-08-09T09:54:36.283 回答
0

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

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

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

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

小提琴 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;
}

小提琴 2

于 2015-04-19T12:03:25.200 回答