Как раскрасить половину следующей ячейки в таблице HTML?

Question

Например, у меня есть таблица со следующим html -кодом:

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

Итак, вопрос в том, как нарисовать полную ячейку и половину следующей?

Рисунок, который показывает, как это работает сейчас, правая половина должна быть нарисована как другие:

Ожидаемый результат:

Answer 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

Если вы хотите использовать «дробные colspans», где последняя половина ячейки может иметь содержимое , которое вы должны использовать 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>

Answer 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>