1

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

例子：

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

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

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

4

2 回答 2

0

我认为它不可能只使用 css，它可能使用 javascript，但这绝不是一个好的选择。有一种方法可以做到这一点，它不是很漂亮，但它可能会起作用：如果您使用 php 向表格提供数据，您可以在第二行创建一个不可见的 div，该 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>
于 2012-04-13T20:06:59.883 回答
0

will force the first two columns to be small as possible http://jsfiddle.net/DYeyp/

​&lt;table border=1 style='width:100%;'>
​&lt;tr>
 ​   <td style='width:1%;'>1111</td>
  ​  <td style='width:1%;'>1111</td>
  ​  <td>1</td>
​&lt;/tr>
​&lt;tr>
 ​   <td>1</td>
  ​  <td>1</td>
  ​  <td>1</td>
​&lt;/tr>
​&lt;tr>
 ​   <td>1</td>
  ​  <td>1</td>
  ​  <td>1</td>
​&lt;/tr>
​&lt;/table>​​​​​​​​​​​
于 2012-04-13T19:56:53.693 回答