合並表格單元以實現小屏幕

Question

我在大屏幕上有這樣的東西：

<table>
    <thead>
        <tr>
            <th>title and image</th>
            <th>description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                title
                <br /><img scr="">
            </td>
            <td>
                few words about...
            </td>
        </tr>
    </tbody>
</table>

我想將其更改為以下代碼以實現較小的屏幕：

<table>
    <thead>
        <tr>
            <th>title and description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                title
                <br />few words about...
            </td>
        </tr>
    </tbody>
</table>

你知道該怎么做嗎？ :)我只想用CSS來做，但是我也可以用PHP和JS進行編碼。

謝謝大家，祝你有美好的一天！

Answer 1

您可以-在媒體查詢中-使用此CSS將行轉換為單元格，並將單元格轉換為簡單的內聯元素：

 tr { display: table-cell; } td { display: inline; } 

 <table> <thead> <tr> <th>title and image</th> <th>description</th> </tr> </thead> <tbody> <tr> <td> title <br /><img scr=""> </td> <td> few words about... </td> </tr> </tbody> </table> 

Answer 2

有一個css功能，稱為媒體查詢 ，可讓您根據顯示的屬性有條件地應用css規則。 例如，它可以與min-width(700px)這樣的條件一起用於大型屏幕，而max-width(320px)用於小屏幕。

以下方法在您的標記中將具有重復性，但是如果您使用PHP來呈現它，則可以通過將重復的標記存儲在變量中並引用它們來減少重復的代碼。

CSS：

@media (min-width: 321px) {
    .small-screen {
        display: none;
    }
}

@media (max-width: 320px) {
    .large-screen {
        display: none;
    }
}

HTML：

<table>
    <thead>
        <tr class="large-screen">
            <th>title and image</th>
            <th>description</th>
        </tr>
        <tr class="small-screen">
            <th>title and description</th>
        </tr>
    </thead>
    <tbody>
        <tr class="large-screen">
            <td>
                title
                <br /><img scr="">
            </td>
            <td>
                few words about...
            </td>
        </tr>

        <tr class="small-screen">
            <td>
                title
                <br />few words about...
            </td>
        </tr>
    </tbody>
</table>

Answer 3

在特定瀏覽器或屏幕寬度以上的CSS媒體查詢中，顯示“ wideDisplay”並隱藏“ narrowDisplay”。 當瀏覽器較小時，隱藏“ wideDisplay”並顯示“ narrowDisplay”。

<table>
<thead>
<tr>
<td class="wideDisplay">title and image</td>
<td class="wideDisplay">description</td >
<td class="narrowDisplay">title and description</td>
</tr>
</thead>
</table>