6

4 つの列を持つテーブルを含むレスポンシブ デザインに Twitter ブートストラップを使用しています。テーブルの列の幅を同じにしたいので、td width25% に設定しました。

表の行は表からサイズを継承し、表のセルはそれぞれその 4 分の 1 になると思います。これは、デバイスの幅が 768px 以上の場合に機能するようです。デバイスの幅が小さい場合、親テーブルのサイズではなく、最大のセルのテキストに基づいて行のサイズが調整されます。

以下にいくつかのサンプル コードを示します。さまざまな要素に背景色を付けてエラーを強調しています (ウィンドウのサイズを水平方向に変更すると明らかになります)。エラーは黄色で強調表示されます (基になるテーブルの色が表示されます)。

実際の例: http://pastehtml.com/view/cqrwl31z2.html

Chrome と Safari でテストしました。

<!DOCTYPE html>
<html>
  <head>
    <title>Table Test</title>
    <!-- Bootstrap -->
    <link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        td, th { width: 25% !important; }
        table { background-color: yellow; }
        tr { background-color: gray; }
        th { background-color: aqua; }
        td:nth-child(1) { background-color: red; }
        td:nth-child(2) { background-color: green; }
        td:nth-child(3) { background-color: blue; }
        td:nth-child(4) { background-color: purple; }
    </style>
  </head>
  <body>
    <div class="container">
        <h1>Hello, world!</h1>
        <div class="row">       
            <table class="span12">
                <thead>
                    <tr>
                        <th>A</th>
                        <th>B</th>
                        <th>C</th>
                        <th>D</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                    <tr>
                </tbody>
            </table>
        </div>

        <div class="row">
            <table class="span12">
                <thead>
                    <tr>
                        <th>Longer Table</th>
                        <th>Headers In</th>
                        <th>This</th>
                        <th>Table</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                    <tr>
                </tbody>
            </table>
        </div>
    </div>
  </body>
</html>
4

4 に答える 4

6 
[class*="span"], .uneditable-input[class*="span"], 
.row-fluid [class*="span"] {
   display: table;
}

テーブルでグリッドクラスを使用するのは良い考えではないかもしれません。代わりに、ラッパーdivで.span12を使用し、テーブルを。に設定しますwidth: 100%。

于 2013-01-30T04:08:55.393 に答える
3

テーブルに幅を置きます。

http://jsfiddle.net/neEeKQ/4/

table {
background-color: yellow;
width:100%;
}
于 2013-01-30T04:19:58.963 に答える
1

テーブルの100%属性width="100%"またはstyle="width:100%"

于 2016-05-02T21:35:32.893 に答える
0

ズームするか、デバイスの幅が指定された幅よりも大きくなると、幅が px ではなく % で指定されるため、拡張するスペースがないため、これを克服する最善の方法は

min-width:100px

、最小幅になる td または thに使用することですデバイス幅を超えてもかかります。

于 2013-01-30T04:35:52.663 に答える