1

3 列のテーブルがある場合、最初の 2 列は常に同じ動的幅、つまりできるだけ小さくしたいのですが、2 つの列は常に幅を共有する必要があります。3 番目の列は、使用可能なコンテナー幅の残りを埋める必要があります。

例：

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

B の内容は 2 文字の列に収まりますが、幅は 4 文字であることに注意してください。

コンテンツのサイズが異なるため、列 A と B の幅をハードコーディングすることは解決策ではありません。

4

2 に答える 2

0

最初の2つの列を可能な限り小さくします 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>
​&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 に答える
0

cssだけで可能だとは思いませんが、おそらくjavascriptで可能ですが、それは決して良い選択肢ではありません. これを行う方法はありますが、あまり美しくはありませんが、うまくいく可能性があります: テーブルにデータを供給するために php を使用している場合、最初の行とまったく同じデータを持つ非表示の div を 2 行目に作成できます。例えば：

<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 に答える