css - 填充整个剩余空间的单元格表的内容

Question

我有一段类似于以下摘录的代码:

   <table>
     <tr>
       <td>Some Text <span>other text</span></td>
     </tr>
     <tr>
       <td>Some other Text <span>some other text 2</span></td>
     </tr>
   </table>

不同的表格行可以有不同的内容长度，但显然行之间的单元格宽度是相等的。

我希望 SPAN 标记中包含的文本与单元格表的整个剩余空间一样长，因为它具有彩色背景。宽度:100% 不能解决我的问题，因为跨度文本没有放在单元格表的开头。

是否可以通过简单的方式实现？

Answer 1

添加 white-space: nowrap; 样式到表格。

Live Demo Here.

删除 CSS 部分以查看更改。同时检查表格宽度