【问题标题】：How to paint out half of the next cell in HTML table?如何在 HTML 表格中绘制下一个单元格的一半？
【发布时间】：2020-05-03 01:07:34
【问题描述】：

例如，我有一个带有下一个 html 代码的表格：

<table>
    <tbody>
        <tr>
            <td class="cal-prop">Name</td>
                <td class="blabla class" colspan="somevalue">
                    Some data
                </td>
        </tr>
    </tbody>
</table>

那么，问题是，如何画出整个单元格和下一个单元格的一半？

显示它现在如何工作的图片，右半部分应该像其他人一样绘制：

预期结果：

【问题讨论】：

Colspans 不能是分数的......“右半边应该像其他人一样画”是什么意思？你能举一个你想要的例子吗？

标签： html css html-table

【解决方案1】：

CSS

也许你可以试试绝对定位。这看起来 colspan 是分数，但您不能将内容添加到最后半个单元格：

table{
  border-collapse: collapse;
}

table td{
  border: 1px solid #000;
  height: 20px;
  min-width: 20px;
  padding: 0;
}

.painted, 
td.half-painted::before{
  background: #aaa;
}

td.half-painted{
  position: relative;
}

td.half-painted::before{
  display: inline-block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  z-index: -1;
}

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
   </tr>
  <tr>
    <td colspan="2" class="painted">9</td>
    <td class="half-painted"></td>
   </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
   </tr>
</table>

如果你不想画和半画之间的边界线，添加以下规则：

td.half-painted{
  border-left: 0px none transparent;
}

td.painted{
  border-right: 0px none transparent;
}

Javascript

如果您想使用 后半部分单元格可以包含内容的“小数列跨度”，您必须使用 javascript：

$(document).ready(function(){
  $('.fractional-colspan[data-colspan]').each(function(){
    // otherwise the width of this element gets added to 
    // the width of the first column
    $(this).css("position", "absolute");
    
    var td = $(this).closest("td");
    var tds = td.parent().children();
    var bc = td.closest("table").css("border-collapse") == "collapse";
    var i = tds.index(td);
    var colspan = parseFloat($(this).attr("data-colspan"));
    
    var width = 0;
    for(var j = 0; colspan > 1 && i < tds.length; j++){
      width += getCellWidth(tds.eq(i), j == 0, colspan - 1 == 0, bc);
      i++;
      colspan--;
    }
    
    if(colspan > 0 && i < tds.length){
      var cell = tds.eq(i);
      width += parseFloat(cell.css("borderLeftWidth"));
      width += parseFloat(cell.css("paddingLeft"));
      width += cell.width() * colspan;
    }
    
    td.css("position", "relative");
    $(this).css({
      "display": "inline-block",
      "top": 0,
      "left": 0,
      "bottom": 0,
      "width": width + "px"
    });
  });
});

function getCellWidth(cell, is_start_cell, is_end_cell, border_collapse){
  var width = 0;
  if(!is_start_cell){
    // not in starting cell, add left border and padding
    width += parseFloat(cell.css("borderLeftWidth"));
    width += parseFloat(cell.css("paddingLeft"));
  }
  width += cell.width();
  if(!border_collapse && !is_end_cell){
    // not in last cell
    width += parseFloat(cell.css("borderRightWidth"));
    width += parseFloat(cell.css("paddingRight"));
  }
  return width;
}

table{
  border-collapse: collapse;
}

table td{
  border: 4px solid #000;
  height: 30px;
  min-width: 30px;
  padding: 0;
}

.painted{
  background: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
   </tr>
  <tr>
    <td><span class="fractional-colspan painted" data-colspan="2.5">Some data</span></td>
    <td></td>
    <td></td>
   </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
   </tr>
</table>

【讨论】：

【解决方案2】：

如何绘制全屏是width: 100%，在css中：

<table>
    <tbody>
        <tr>
            <td class="cal-prop">Name</td>
                <td class="blabla class" colspan="somevalue" style="width: 100%">
                Some text
            </td>
        </tr>
    </tbody>
</table>

【讨论】：