21

テーブル行のセルを垂直に表示する必要があります。これは FF では問題なく動作しますが、iPad の Chrome や Safari では動作しません。

以下の例は、FF で期待どおりにレンダリングされ、各行セルが互いの下に表示されますが、Chrome では、display:block を完全に無視するようです。

問題は何ですか - またはこれを行うためのより良い方法はありますか。

(これが必要な理由は、CSS で @media を使用して、小さな画面でテーブルを別の方法でレンダリングするためです)

より視覚的な例:

通常のテーブルは

DATA1 | DATA2 | DATA3

ただし、display:block を使用すると、次のようになります。

DATA1
DATA2
DATA3

どうもありがとう

<html>
<head>
<style>
    table,
    thead,
    tr,
    td
    {
        display:block;
    }
    table,tr
    {
        border : 1px dotted red;
    }
    td
    {
        border:1px dashed blue;
    }
    thead
    {
        display:none;
    }
</style>
</head>
<body>

<table>
<thead>
<tr>
    <td>Heading 1</td>
    <td>Heading 2</td>
    <td>Heading 3</td>
</tr>
</thead>
<tbody>
<tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
</tr>
<tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
</tr>
<tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
</tr>

</tbody>
</table>

</body>
</html>
4

3 に答える 3

66

編集2：

私はあなたの問題を解決したと思います。Webkitは、html に対して宣言されていない場合、オーバーライドして td にあるdisplay: block;ように計算します。display: table-cell;<!DOCTYPE>

これを修正するには、html の先頭に<!DOCTYPE html>beforeを設定することをお勧めします。<html>

jsfiddle が機能する理由は、サイトが<!DOCTYPE>既に宣言されているためです。

これを試して、問題が解決するかどうかお知らせください。そうでない場合は、別の答えを見つけようとします。

于 2012-05-11T18:13:46.843 に答える
1

td の代わりに th を使用してトリックを行いました。そして、サファリにのみ適用されるCSSハック（一般的なWebkitではありません）。

HTML:

<table>
    <tr>
        <th>Cell 1</th> 
        <th>Cell 2</th>
    </tr>
</table>

CSS:

table {
    width: 100%;
    text-align: left;
}

/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
    .safari-fix table tr {
        display: block;
        width: 100%;
    }
}
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { 
    @media {
        .safari-fix table tr {
            display: block;
            width: 100%;
        }
    }
}

table th {
    width: 100%;
    display: block;
}

これが私のjsfiddleです

于 2018-01-11T11:32:11.270 に答える
0

ChromeまたはSafariでテーブルが壊れています

多くの場合、テーブルで発生します。

display:block;  
display:"";

また

display:block;
display:table-row; 
*display:block;
于 2013-03-04T10:28:17.453 に答える