Question

给定一个三列表，我希望前两列始终具有相同的动态宽度 - 即尽可能小，但两列需要始终共享宽度。第三列应填充可用容器宽度的其余部分。

示例：

+----+----+--------------+
|  A |  B |      C       |
+----+----+--------------+
|1234|  12|           foo|
+----+----+--------------+
|   a|   b|           bar|
+----+----+--------------+

请注意，B的宽度为4个字符，但其内容适合2个字符列。

对A列和B列的宽度进行硬编码不是解决方案，因为内容的大小不同。

Answer 1

会强制前两列尽可能小 http://jsfiddle.net/DYeyp/

<table border=1 style='width:100%;'>
<tr>
    <td style='width:1%;'>1111</td>
    <td style='width:1%;'>1111</td>
    <td>1</td>
</tr>
<tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
</tr>
<tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
</tr>
</table>

Answer 2

我不认为它只能用css，它可能用javascript，但这绝不是一个好选择。有一种方法可以做到这一点，它不是很漂亮，但它可能有用：如果你使用php来为表提供数据，你可以在第二行创建一个与第一行完全相同的数据的不可见div。例如：

<div class="NoSelect" style="display: inline-block; height: 1px; overflow: hidden;">
--echo here the same data as in the first row--
</div>

要使文本无法选择，您可以添加：

<style type="text/css">
    .NoSelect {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
        cursor: default;
    }
</style>
<script language="javascript" type="text/javascript">
    jQuery.fn.extend({ 
        disableSelection : function() {
            return this.each(function() {
                this.onselectstart = function() { return false; };
                this.unselectable = 'on';
            });
        }
    });
    $(document).ready(function() {
        $('.NoSelect').disableSelection();
    }
</script>

CSS：对三列表的两列强制相同的宽度

2 个答案: