创建具有固定尺寸的html表格 [英] Creating html table with fixed dimensions
问题描述
短
尝试使用a4打印的确切尺寸获取表格
- 纸张的第一行和最后一行的边距必须小于11毫米
- 行之间的边距为0毫米
- 表格的行必须位于纸张左右的 4 mm
- 每列之间 2毫米
- 38毫米宽x 21.2毫米高
每个单元
- 13 x行，5 x列，13x5 = 65格
这里是JS小提琴
http://jsfiddle.net/tt13/ZjBrV/
问题
在这种情况下我能做些什么？如何使用我上面解释的条件获取表格？
详细
html表格看起来像 p>
< body>
< table>
< td>
< div class =bcell>
sample text2< br />
< img src =.../>< br />
sample text2
< / div>
< / td>
....
< / table>
< / body>
使用下面的css来获得A4尺寸的打印结果，但是获得与我上面解释的条件完全不同的东西。
body {
padding：11mm 4mm 0 4mm;
背景：白色;
font-family：Arial;
宽度：210mm;
font-size：3mm;
}
表{
page-break-after：always;
宽度：100％;
身高：275mm;
margin：0 auto;
page-break-inside：avoid;
border-collapse：collapse;
}
td img {
height：10mm;
}
td {
width：38mm;
身高：21.2毫米;
填充：0 1mm 0 1mm;
font-style：bold;
text-align：center;
vertical-align：middle;
}
tr {
page-break-after：auto;
page-break-inside：avoid;
身高：21.2毫米;
保证金：0;
padding：0;
page-break-inside：avoid;
表格单元元素的宽度。你想要做的是将单元格的内容包装在div或span中，并使用td：first-child在css中设置宽度，或者使用 css table model 。 Short
Trying to get table with exact dimensions for a4 print
- Table's first and last rows' margin from top and bottom sides of paper must be 11 mm
- Margin between rows' 0 mm
- Table's rows must be at 4 mm from left and right sides of paper
- 2 mm between every column
- 38 mm width x 21.2 mm height each cell
- 13 x rows, 5 x columns, 13x5=65 cells
Here is JS fiddle
http://jsfiddle.net/tt13/ZjBrV/
Question
What can I do in this case? How to get the table with conditions that I explained above?
Detailed
html table looks like that
<body>
<table>
<td>
<div class="bcell">
sample text2<br/>
<img src="..."/><br/>
sample text2
</div>
</td>
....
</table>
</body>
Using css below to achieve A4 size print result, but getting something absolutely different from conditions that I explained above.
body {
padding:11mm 4mm 0 4mm;
background: white;
font-family: Arial;
width: 210mm;
font-size:3mm;
}
table {
page-break-after:always;
width: 100%;
height: 275mm;
margin:0 auto;
page-break-inside:avoid;
border-collapse: collapse;
}
td img {
height:10mm;
}
td {
width: 38mm;
height:21.2mm;
padding: 0 1mm 0 1mm;
font-style: bold;
text-align: center;
vertical-align:middle;
}
tr {
page-break-after:auto;
page-break-inside:avoid;
height:21.2mm;
margin:0;
padding:0;
page-break-inside:avoid;
}
Css is not effective in changing the width of table cell elements. What you'll want to do is either wrap the content of the cell in a div or span and use the td:first-child to set the width in the css, or use the css table model.
这篇关于创建具有固定尺寸的html表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
