如何在HTML5中拆分單元格

Question

我已經在html5中創建了一個單元格，並且我想使用colspan="2"拆分該單元格，但是它不適合我想要實現的功能。

我想做的是，像下面的圖像所示那樣拆分單元格，其中左側允許用戶鍵入文本，右側是一個按鈕，單擊該按鈕可以切換單詞“開/關”。

https://jsfiddle.net/kmkgr4ru/

抱歉，如果我的問題不清楚，那么我是Web開發的新手。 歡迎任何幫助。

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> 

工作小提琴

解決方案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> 

小提琴鏈接