在小屏幕上查看HTML表格時強制「縮小」

Question

目前，在小屏幕上查看此表格會產生一個水平滾動條。相反，我如何強制它在小屏幕上顯示全屏和「縮小」？

我想達到什麼是發生在右手圖片瀏覽：https://css-tricks.com/wp-content/uploads/2011/04/doublesuck.png

我希望有某種媒體查詢CSS我可以使用的。

.td { 
 
    /* width: 100% !important; */ 
 
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 
 
    color: #2b2c37; 
 
} 
 

 
.tracking-provider { 
 
    text-align: left; 
 
    font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; 
 
    color: #737373; 
 
    border: 1px solid #e4e4e4; 
 
    padding: 12px; 
 
} 
 

 
.tracking-number { 
 
    text-align: left; 
 
    font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; 
 
    color: #737373; 
 
    border: 1px solid #e4e4e4; 
 
    padding: 12px; 
 
} 
 

 
.date-shipped { 
 
    text-align: left; 
 
    font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; 
 
    color: #737373; 
 
    border: 1px solid #e4e4e4; 
 
    padding: 12px; 
 
} 
 

 
.order-actions { 
 
    text-align: left; 
 
    font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; 
 
    color: #737373; 
 
    border: 1px solid #e4e4e4; 
 
    padding: 12px; 
 
}

<table class="td" cellspacing="0" cellpadding="6" border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th class="tracking-provider" scope="col">Provider</th> 
 
     <th class="tracking-number" scope="col">Tracking Number</th> 
 
     <th class="date-shipped" scope="col">Date</th> 
 
     <th class="order-actions" scope="col">&nbsp;</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="tracking"> 
 
     <td class="tracking-provider"> 
 
     Startrack </td> 
 
     <td class="tracking-number"> 
 
     99999999999999 </td> 
 
     <td class="date-shipped"> 
 
     <time datetime="2017-07-30">July 30, 2017</time> 
 
     </td> 
 
     <td class="order-actions"> 
 
     <a href="http://google.com" target="_blank">Track</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

您可以使用CSS中的media查詢。當你有不同的尺寸時，你可以改變寬度。這是一個它如何工作的小例子！

.td { 
 
    /* width: 100% !important; */ 
 
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 
 
    color: #2b2c37; 
 
} 
 

 
.tracking-provider { 
 
    text-align: left; 
 
    font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; 
 
    color: #737373; 
 
    border: 1px solid #e4e4e4; 
 
    padding: 12px; 
 
} 
 

 
.tracking-number { 
 
    text-align: left; 
 
    font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; 
 
    color: #737373; 
 
    border: 1px solid #e4e4e4; 
 
    padding: 12px; 
 
} 
 

 
.date-shipped { 
 
    text-align: left; 
 
    font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; 
 
    color: #737373; 
 
    border: 1px solid #e4e4e4; 
 
    padding: 12px; 
 
} 
 

 
.order-actions { 
 
    text-align: left; 
 
    font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; 
 
    color: #737373; 
 
    border: 1px solid #e4e4e4; 
 
    padding: 12px; 
 
} 
 

 
@media(max-width: 500){ 
 
    .td{ 
 
    width: 100%; 
 
    } 
 
}

<table class="td" cellspacing="0" cellpadding="6" border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th class="tracking-provider" scope="col">Provider</th> 
 
     <th class="tracking-number" scope="col">Tracking Number</th> 
 
     <th class="date-shipped" scope="col">Date</th> 
 
     <th class="order-actions" scope="col">&nbsp;</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="tracking"> 
 
     <td class="tracking-provider"> 
 
     Startrack </td> 
 
     <td class="tracking-number"> 
 
     99999999999999 </td> 
 
     <td class="date-shipped"> 
 
     <time datetime="2017-07-30">July 30, 2017</time> 
 
     </td> 
 
     <td class="order-actions"> 
 
     <a href="http://google.com" target="_blank">Track</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

你可以使用這個簡單的CSS來縮小表,,我用父母寬度的三分之二..你可以用你的表試試。

.tftable { 
 
    font-size: 12px; 
 
    color: #333333; 
 
    width: 100%; 
 
    border-width: 1px; 
 
    border-color: #9dcc7a; 
 
    border-collapse: collapse; 
 
} 
 

 
.tftable th { 
 
    font-size: 12px; 
 
    background-color: #abd28e; 
 
    border-width: 1px; 
 
    padding: 8px; 
 
    border-style: solid; 
 
    border-color: #9dcc7a; 
 
    text-align: left; 
 
} 
 

 
.tftable tr { 
 
    background-color: #bedda7; 
 
} 
 

 
.tftable td { 
 
    font-size: 12px; 
 
    border-width: 1px; 
 
    padding: 8px; 
 
    border-style: solid; 
 
    border-color: #9dcc7a; 
 
} 
 

 
.tftable tr:hover { 
 
    background-color: #ffffff; 
 
} 
 

 
.tftable { 
 
    zoom: 50 %; 
 
    transform: scale(calc(2/3)); 
 
}

<table class="tftable" border="1"> 
 
    <tr> 
 
    <th>Header 1</th> 
 
    <th>Header 2</th> 
 
    <th>Header 3</th> 
 
    <th>Header 4</th> 
 
    <th>Header 5</th> 
 
    <th>Header 6</th> 
 
    <th>Header 7</th> 
 
    <th>Header 8</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Row:1 Cell:1</td> 
 
    <td>Row:1 Cell:2</td> 
 
    <td>Row:1 Cell:3</td> 
 
    <td>Row:1 Cell:4</td> 
 
    <td>Row:1 Cell:5</td> 
 
    <td>Row:1 Cell:6</td> 
 
    <td>Row:1 Cell:7</td> 
 
    <td>Row:1 Cell:8</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Row:2 Cell:1</td> 
 
    <td>Row:2 Cell:2</td> 
 
    <td>Row:2 Cell:3</td> 
 
    <td>Row:2 Cell:4</td> 
 
    <td>Row:2 Cell:5</td> 
 
    <td>Row:2 Cell:6</td> 
 
    <td>Row:2 Cell:7</td> 
 
    <td>Row:2 Cell:8</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Row:3 Cell:1</td> 
 
    <td>Row:3 Cell:2</td> 
 
    <td>Row:3 Cell:3</td> 
 
    <td>Row:3 Cell:4</td> 
 
    <td>Row:3 Cell:5</td> 
 
    <td>Row:3 Cell:6</td> 
 
    <td>Row:3 Cell:7</td> 
 
    <td>Row:3 Cell:8</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Row:4 Cell:1</td> 
 
    <td>Row:4 Cell:2</td> 
 
    <td>Row:4 Cell:3</td> 
 
    <td>Row:4 Cell:4</td> 
 
    <td>Row:4 Cell:5</td> 
 
    <td>Row:4 Cell:6</td> 
 
    <td>Row:4 Cell:7</td> 
 
    <td>Row:4 Cell:8</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Row:5 Cell:1</td> 
 
    <td>Row:5 Cell:2</td> 
 
    <td>Row:5 Cell:3</td> 
 
    <td>Row:5 Cell:4</td> 
 
    <td>Row:5 Cell:5</td> 
 
    <td>Row:5 Cell:6</td> 
 
    <td>Row:5 Cell:7</td> 
 
    <td>Row:5 Cell:8</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Row:6 Cell:1</td> 
 
    <td>Row:6 Cell:2</td> 
 
    <td>Row:6 Cell:3</td> 
 
    <td>Row:6 Cell:4</td> 
 
    <td>Row:6 Cell:5</td> 
 
    <td>Row:6 Cell:6</td> 
 
    <td>Row:6 Cell:7</td> 
 
    <td>Row:6 Cell:8</td> 
 
    </tr> 
 
</table>

Answer 3

1）解決您的設計

雖然沒有什麼錯，每說你的請求;您鏈接到該圖像確實狀態

都同樣吸

，因爲他們做的。我會整體暗示reworking how your data is laid out;不堅持傳統的多列表語法。

2）弗蘭肯斯坦CSS解

無論如何;作爲解決方案;你想要使用兩個規則：一個用於大屏幕，另一個用於小屏幕。 「大屏幕」規則是默認設置，雖然爲了清晰起見，在此處顯示;這是你已經知道的信息，只是對瀏覽器默認的一個調整。

table { 
    display : table; 
    max-width : 100%; 
    box-sizing : border-box; 
    border-collapse: collapse; 
} 

現在;用於小型設備的媒體查詢;說不到768px（這個數字是相當arbetary;只要選擇規模是小於你的表列舒適地放入）：

@media screen only and (max-width:765px){ 
    table { 
     max-width :100vw; 
     width  :100vw; 
     font-size :<figure>vw; 
    } 
} 

上述規則將工作，如果的<table>的所有子元素按百分比或屏幕寬度或其他非絕對值縮放（即<td>寬度被聲明爲%而不是px等）。

字體大小爲opional bonus variable，這取決於您的表格大小以及您希望顯示在屏幕上的數據量以及您希望此數據的可讀性如何。另請注意，字體大小可能需要使用!important;標誌來覆蓋表格上的單元格或行特定字體大小。

如果你熱衷於縮放字體（根據你的示例圖像），我會建議看看precise control responsive typography by Mike。

3）使用的Vewport Meta標籤

的Viewport Meta Tag將大大大大有助於你跳這一關。

4）不要放大或變換：規模

的CSS zoom規則是不是在很多瀏覽器中實現。它不應該被使用。使用transform:scale也適用於某些瀏覽器（Chrome），但在其他瀏覽器中完全不起作用（Firefox）。