Question

我的问题很简单，我怀疑答案是不可能的，因为我找不到任何例子。

我有一个用css和HTML构建的表。我想按比例重新调整它的大小，好像它是一个图像所以它适合DIV。我知道你们知道桌子看起来像什么但似乎我必须提交一些代码来提交这些问题所以我在下面添加了

<table>
    <tr>
       <td></td>
    </tr>
</table>

假设不可能将表转换为图像然后我可以重新调整图像大小？

Answer 1

您可以将表格的宽度设置为包含div的100％，然后将＆lt; td＆gt;设置为表格的百分比。

一个例子是这样的：http://jsfiddle.net/9VFQ5/

<div class="container">
  <table>
      <tr>
         <td>Test 1</td>
         <td>Test 2</td>
      </tr>
  </table>
</div>


.container {
  width: 25%;
  background-color: red;
}
table {
  width: 80%;
  margin: 0 auto;
  background-color: blue;
}
td {
  width: 50%;
  color: white;
}

Answer 2

.container {
  width: 100%;
  background-color: blue;
}

table {
  width: 80%;
  margin: 0 auto;
  background-color: red;
}

td {
  width: 50%;
  color: white;
  padding: 1rem;
  background-color: green;
}

th {
  color: black;
}

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 container">
  <table>
    <tr>
      <th>1st COLUMN</th>
        <th>2nd COLUMN</th>
    </tr>
    <tr>
      <td>Table Data1 Row1</td>
      <td>Table Data2 Row1</td>
    </tr>
    <tr>
      <td>Table Data1 Row2</td>
      <td>Table Data2 Row2</td>
    </tr>
  </table>
</div>

按比例调整表大小以适合div

2 个答案: