在小屏幕上查看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）。