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 标签中包含的文本与单元格表的整个剩余空间一样长，因为它具有彩色背景。Width:100% 不能解决我的问题，因为跨度文本没有放在单元格表的开头。

有可能以一种简单的方式吗？

Answer 1

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

现场演示在这里。

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