两列表：一个尽可能小，另一个取其余

本文介绍了两列表：一个尽可能小，另一个取其余的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在div中有一个to-columns表：

I have a to-columns table in a div :

<div> <table> <tbody> <tr> <td class="action" > <a> ✔ </a> </td> <td class="content"> <p>Bigger text...(variable size).......</p> </td> </tr> <tr> <td class="action" > <a> ✔ </a><a> ✘ </a> </td> <td class="content"> <p>Bigger text...(variable size).......</p> </td> </tr> ... same structure in all the table </tbody> </table> </div>

我想action列适合内容，content列占用剩余的可用空间。 动作列将看起来更好与右对齐。 表格也应该符合容器宽度的100％。

And I would like the "action" column to fit the content, and the "content" column to take the rest of available space. The "action" column would look better with a right align. The table should also fit 100% of the container's width.

有没有办法固定列宽度？

Is there a way of doing this without fixing the columns width ?

我试过这个：

table .action { width:auto; text-align:right; } table { border-collapse:collapse; border-spacing:0; width:100%; }

但左栏占用表格的一半...

But the left column takes half of the table...

推荐答案

给内容 td 一个100％的宽度将迫使它占用尽可能多的空间因为它可以，所以 .content {width：100％} 应该工作。

Giving the content td a 100% width will force it to take as much space as it can, so .content{ width: 100% } should work.

还要给.action a white-space：nowrap ，以确保x和复选标记保留在彼此。

Also give the .action a white-space: nowrap to make sure the x and the checkmark stay next to each other. Otherwise the content will be able to take even more space and force the icons below each other.

table .action { width:auto; text-align:right; white-space: nowrap } table .content { width: 100% } table { border-collapse:collapse; border-spacing:0; width:100%; border: 1px solid }

<table> <tbody> <tr> <td class="action" > <a> ✔ </a> </td> <td class="content"> <p>Bigger text...(variable size).......</p> </td> </tr> <tr> <td class="action" > <a> ✔ </a><a> ✘ </a> </td> <td class="content"> <p>Bigger text...(variable size).......</p> </td> </tr> </tbody> </table>