[英]Resize Table Proportionally to fit within div
My issue is simple and i suspect the answer is its not possible as i couldn't find any examples. 我的问题很简单,我怀疑答案是不可能的,因为我找不到任何例子。
I have a table built with css and HTML. 我有一个用css和HTML构建的表。 I would like to re-size it proportionally as if it was an image so it fits inside a DIV. 我想按比例重新调整它的大小,好像它是一个图像所以它适合DIV。 I know you guys know what a table looks like but seems like i have to submit some code to submit this questions so i added it below 我知道你们知道桌子是什么样子但似乎我必须提交一些代码来提交这些问题,所以我在下面添加了它
<table>
<tr>
<td></td>
</tr>
</table>
Assuming that's not possible is it possible to convert a table into an image and then i can re-size the image? 假设不可能将表转换为图像然后我可以重新调整图像大小?
You can set the width of the table to be 100% of the containing div, then set the <td>'s to be a percentage of the table. 您可以将表的宽度设置为包含div的100%,然后将<td>设置为表的百分比。
An example would be something like this: http://jsfiddle.net/9VFQ5/ 例如: 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;
}
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.