Question

我试图创建一个这样的表：

我想在每一行之间都有一个元素。它将是一个在这些行之间添加行的按钮。类似于Msft Word的做法：

Rowspan在这里不会削减它，因为rowspan将跨越第1行和第1行。 2,3和＆amp; 4而不是2＆amp; 3。

<table>
    <tbody>
    <tr>
        <td>foo row 1</td>
        <td rowspan="2" >+</td>
    </tr>
    <tr>
        <td>bar row 2</td>
    </tr>
    <tr>
        <td>xxx row 3</td>
        <td rowspan="2" >+</td>
    </tr>
    <tr>
        <td>yyy row 4</td>
    </tr>
    <tr>    

    </tr>
    </tbody>
</table>

这就是我喜欢它的样子：

谢谢，

Answer 1

我的回答将特定于您提供的HTML表格，但如果您有不同的表格，它还可以让您想出来。

我已将id添加到某些单元格中，然后将样式应用于每个单元格。

＆＃13;

td {
  border: 1px solid red;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

#cell1 {
  border-top: 1px solid red !important;
}

#cell2, #cell1{
  border-bottom: none;
  position: absolute;
  padding-top: 11px;
  border-left: none;
  border-top: none;
  padding-left: 2px;
  
  
}

#cell3{
  border-top: none;
}

＆＃13;

<table>
    <tbody>
    <tr>
        <td>foo row 1</td>
        <td id="cell1">+</td>
    </tr>
    <tr>
        <td>bar row 2</td>
        <td id="cell2">+</td>
    </tr>
    <tr>
        <td>xxx row 3</td>
        <td rowspan="2" id="cell3">+</td>
    </tr>
    <tr>
        <td>yyy row 4</td>
    </tr>
    <tr>    

    </tr>
    </tbody>
</table>

＆＃13;

Answer 2

您可以通过在table内添加另一个只有三行和三个单元格的td来轻松完成此操作。

请参阅以下代码：

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="4" style="border:0;">
      <table>
        <tr>
          <td>Something here</td>
        </tr>
        <tr>
          <td>Something here</td>
        </tr>
        <tr>
          <td>Something here</td>
        </tr>

      </table>
    </td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>April</td>
    <td>$80</td>
  </tr>
</table>

https://jsfiddle.net/hs3sz5bh/2/

Answer 3

需要进行一些微调，但使用HTML5的Content Editable属性，我们可以将:focus pseudo class与:after pseudo element结合使用，以实现以下目标：

＆＃13;

table {
  border-spacing:0 4px;
}
tbody tr:focus {
  outline: none;
}
tbody tr:focus * {
  border-bottom: 5px  double black;
}
tbody tr:focus:after {
  content: '+';
  display: block;
  cursor: pointer;
  transform: translateY(0.75rem);
  border: 2px solid black;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  text-align: center;
}

＆＃13;

<table>
  <thead>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holidays</th>
  </thead>
  <tbody>
    <tr contenteditable='true'>
      <td>Month</td>
      <td>Money</td>
      <td>value</td>
    </tr>
    <tr contenteditable='true'>
      <td>Month</td>
      <td>Money</td>
      <td>value</td>
    </tr>
    <tr contenteditable='true'>
      <td>Month</td>
      <td>Money</td>
      <td>value</td>
    </tr>
  </tbody>
</table>

＆＃13;

对于＆＃39;新行＆＃39;要始终可见的按钮，您可以删除contenteditable属性和css的:focus部分，如下所示：

＆＃13;

table {
  border-spacing:0 4px;
}
tbody tr * {
  border-bottom: 5px  double black;
}
tbody tr:after {
  content: '+';
  display: block;
  cursor: pointer;
  transform: translateY(0.75rem);
  border: 2px solid black;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  text-align: center;
}

＆＃13;

<table>
  <thead>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holidays</th>
  </thead>
  <tbody>
    <tr>
      <td>Month</td>
      <td>Money</td>
      <td>value</td>
    </tr>
    <tr>
      <td>Month</td>
      <td>Money</td>
      <td>value</td>
    </tr>
    <tr>
      <td>Month</td>
      <td>Money</td>
      <td>value</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 4

您可以使用编辑此代码来获得相同的结果

<script>

$(document).ready(function(){
    var i=0;
    $("#btnGenerate").click(function () {
        var ename = $("#ename").val();
        var eid = $("#eid").val();
        var desc = $("#desc").val();

        szTr = "<tr><td>";
        szTr = szTr + ename + "</td>";
        szTr = szTr + "<td>" + eid + "</td>";
        szTr = szTr + "<td>" + desc  + "</td>";
        if(i%2==0) szTr = szTr + "<td rowspan='2'>+</td>";
        i++;
        szTr = szTr + "</tr>";
        $('#display').append(szTr);

    });


    $('#display').on('click', '.delete', function () {
        $(this).parents('tr').remove();
    });

});



</script>
</head>
<body>

Name:<input type="text" id="ename" value="Name"/><br />
Id: <input type="text" id="eid" value="new_id"/><br />
Des <input type="text" id="desc" value="description"/><br />
 <input type="button" value="Generate" id="btnGenerate">

<div id="dvTable">
<table id="display">
</table>
</div>
</body>
</html>

表：在中间行空间

4 个答案: