在桌边的两边添加空白区域？ [英] Add blank space on both sides of a table border?

问题描述

所以我想制作一个只有CSS / HTML的表格。

So I want to make a table that looks like this with only CSS/HTML.

______________
|  ---------  |
|  ---------  |
|  ---------  |
|  ---------  |
|  ---------  |
|  ---------  |
|  ---------  |
|  ---------  |
|  ---------  |
|_____________|

我不希望border-bottom：dotted一直从左边界到右边界。我希望它只能走70％​​左右。因此左右边框之间会有一些空白区域，中间会有一些点。

喜欢这个|（空格）............（空格）|



我搜索谷歌没有任何结果...请帮助！



这是我的代码：

I don't want the "border-bottom: dotted" to go all the way from the left border to the right border. I want it to be go only ~70% of the way. So there will be some white space between the left and right borders and some dots in the center of that.
Like this |(space)............(space)|

I have searched google without any results... Please help!

Here is my code:

<style>
table.mytable {
	font-family: Source Sans Pro;
	font-size:16px;
	text-align: center;
	color:#333333;
	border-width: 1px;
	border-color: #39B2FF;
	border-collapse: collapse;
	width: 100%;
}
table.mytable th {
	background:#39B2FF url('cell-blue.jpg');
	font-family: BEBAS;
	font-size:24px;
	color: #FFFFFF;
	border-width: 1px;
	padding: 16px;
	border-style: solid;
	border-color: #39B2FF;
}
table.mytable td {
	background:#FFFFFF url('cell-grey.jpg');
	border-width: 1px;
	cellpadding: 60px;
	padding: 45px;
	border-left:1px solid;
	border-right:1px solid;
	border-bottom:1px dotted ;
	border-bottom-width: 1px;
	border-color: #39B2FF;
}
</style>

<table class="mytable">
<tr>
	<th>Header START</th>
</tr>
<tr>
	<td>Text 1A</td>
</tr>
<tr>
	<td>Text 2A</td>
</tr>
<tr>
	<td>Text 3A</td>
</tr>
<tr>
	<td>Text 4A</td>
</tr>
<tr>
	<td>Text 5A</td>
</tr>
<tr>
	<td>Text6A</td>
</tr>
<tr>
	<td>Text7A</td>
</tr>
<tr>
	<td style="border-removednone;">>Text Last</td>
</tr>
<tr>
    <th>Header END →</th>
</table>

<pre lang="HTML">

推荐答案

尝试在细胞周围添加填充物。

Try putting a padding around the cells.

我希望你的代码工作正常。



我刚为你的代码创建了一个小提琴



http://jsfiddle.net/King_Fisher/crLLwmo5/ [ ^ ]

I hope your code is working fine.

I just created a fiddle for your Code

http://jsfiddle.net/King_Fisher/crLLwmo5/[^]

这篇关于在桌边的两边添加空白区域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！