如何在html5中拆分单元格

Question

我已经在html5中创建了一个单元格，我将使用colspan="2"分割我尝试过的单元格，但它不符合我想要实现的目标。

我想要做的是，如下图所示拆分单元格，左侧允许用户输入文本，右侧是单击按钮切换单词ON / OFF的按钮。

https://jsfiddle.net/kmkgr4ru/

很抱歉，如果我的问题不明确，我对网络开发还不熟悉。欢迎任何帮助。

Answer 1

colspan使单个单元格占用多列。你正试图反过来使用它。

将其他行上的匹配单元格替换为列。

table,
td {
  border-collapse: collapse;
  border: solid black 1px;
  padding: 3px;
}

<table>
  <tr>
    <td>Foo
    <td colspan="2">Bar
  <tr>
    <td>Baz
    <td><input>
    <td><button>On</button>
</table>

Answer 2

您可以采取以下方式：

$("#btnToggle").click(function () {
            $(this).text(function(i, val){
               return val === 'ON' ? 'OFF' : 'ON'
            })
        });

td {
    height: 30px;
    position: relative;
}


div {
    margin-right: 50px;
}

button {
    position: absolute;
    right: 2px;
    top: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" width="100%" border="1" cellspacing="1">
  <tbody>
    <tr>
  <td><div contenteditable="true">&nbsp;</div>
  <button id='btnToggle'>ON</button>
  </td>
    </tr>
  </tbody>
</table>

<强> Working Fiddle

解决方案2：

如果你不想使用position:absolute，那么display:flex就可以了。

$("#btnToggle").click(function () {
            $(this).text(function(i, val){
               return val === 'ON' ? 'OFF' : 'ON'
            })
        });

td {
    display: flex;
    justify-content: flex-end;
    position: relative;
}
div {
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" width="100%" border="1" cellspacing="1">
  <tbody>
    <tr>
  <td><div contenteditable="true">&nbsp;</div>
  <button id='btnToggle'>ON</button>
  </td>
    </tr>
  </tbody>
</table>

<强> Fiddle Link