强制＆＃34;缩小＆＃34;在小屏幕上查看HTML表格时

时间：2017-08-08 08:18:21

标签： html css

此刻，在小屏幕上查看此表格将生成水平滚动条。相反，我如何强制它显示完整的wdith和＆＃34;缩小＆＃34;在小屏幕上？

我试图在右侧图片中实现目标：https://css-tricks.com/wp-content/uploads/2011/04/doublesuck.png

我希望我可以使用某种媒体查询CSS。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

您可以在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>

答案 1 :(得分：0)

你可以使用这个简单的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>

答案 2 :(得分：0)

1）修复您的设计

虽然每次发言请求没有任何问题;您链接的图片确实状态

  

两者同样吮吸

因为他们这样做。我总体上建议reworking how your data is laid out;不遵循传统的多列表语法。

2） Frankenstein CSS解决方案

总之;作为解决方案;你想使用两个规则：一个用于大屏幕，一个用于小屏幕。 “大屏幕”规则是默认设置，虽然为了清楚起见我在此处显示;它是您已经知道的信息，只是对浏览器中默认值的调整。

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

现在;用于小型设备的媒体查询;比少于768px（这个数字非常棒;只需选择小于您的表格列适合的比例）：

@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元标记

Viewport Meta Tag将有助于你跳过这个障碍。

4）不要缩放或变换：缩放

CSS zoom规则未在许多浏览器中实现。不应该使用它。使用transform:scale也可以在某些浏览器中运行（ Chrome ）但在其他浏览器中根本不起作用（ Firefox ）。

相关问题
最新问题