HTML – 如何围绕文本制作一个紧密的单元格并展开空单元格？_html-js-css

概述我想构建一个有四列的表：两列有文本,两列空.我希望空的那些尽可能地扩展,而那些文本要紧. 以下代码段显示了这样一个表：列的宽度可能用内部文本的大小加权. table,td { border: solid; border-collapse: collapse;} <table style="width: 100%"> <tr> <td>This is some text</t 我想构建一个有四列的表：两列有文本,两列空.我希望空的那些尽可能地扩展,而那些文本要紧.

以下代码段显示了这样一个表：列的宽度可能用内部文本的大小加权.

table,td {  border: solID;  border-collapse: collapse;}

<table >  <tr>    <td>This is some text</td>    <td>And some more</td>    <td></td>    <td></td>  </tr></table>

可以做些什么来把它变成像这样的表

文本将被单元格紧紧包围,空单元格会被扩展？

解决方法如果FlexBox是一个选项,您可以这样做：

>给显示：flex到tr
>给出两个空的flex：1.

见下面的演示：

table,td {  border: solID;  border-collapse: collapse;}table tr {  display: flex;}td:nth-last-child(1),td:nth-last-child(2) {  flex: 1;}

<body>  <table >    <tr>      <td>This is some text. This is some text</td>      <td>And some more</td>      <td></td>      <td></td>    </tr>  </table></body>

总结

以上是内存溢出为你收集整理的HTML – 如何围绕文本制作一个紧密的单元格并展开空单元格？全部内容，希望文章能够帮你解决HTML – 如何围绕文本制作一个紧密的单元格并展开空单元格？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://www.outofmemory.cn/web/1070804.html

HTML – 如何围绕文本制作一个紧密的单元格并展开空单元格？

发表评论

评论列表（0条）