Question

我一直在为这张桌子的造型而挣扎。标题标题需要有单独的下划线，我需要在两组＆＃34;名称＆＃34;之间分隔一行。行。（这些在最终渲染中会有所不同。）

这就是目前的情况：

这就是我正在寻找的：

如果您希望在行动中看到它，我有一个Codepen：Table Styling Codepen

我一直在尝试边境崩溃。我能够在某些条件下获得单独的边框，并在其他条件下获得部分分隔符。但总有一些问题，例如细胞之间没有间距，因此造型看起来非常狭窄。

这是HTML：

<table class="data-table">
<thead>
    <tr>
        <th></th>
        <th colSpan="2" class="title">Source</th>
        <th colSpan="2" class="title">Destination</th>
    </tr>
    <tr>
        <th></th>
        <th colSpan="1" class="fieldname title">Field</th>
        <th colSpan="1" class="title">Value</th>
        <th colSpan="1" class="fieldname title">Field</th>
        <th colSpan="1" class="title">Value</th>
    </tr>
</thead>
<tbody class="bodySection">
    <tr>
        <td rowSpan="2" class="side-title">Name</td>
        <td class="fieldname src-data">Short Name</td>
        <td class="fieldvalue src-data"My Store/td>
        <td class="fieldname dest-data">Short Name</td>
        <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
    <tr>
        <td class="fieldname src-data">Long Name</td>
        <td class="fieldvalue src-data"My Store/td>
        <td class="fieldname dest-data">Long Name</td>
        <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
</tbody>
<tbody class="bodySection">
    <tr>
        <td rowSpan="2" class="side-title">Name</td>
        <td class="fieldname src-data">Short Name</td>
        <td class="fieldvalue src-data"My Store/td>
        <td class="fieldname dest-data">Short Name</td>
        <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
    <tr>
        <td class="fieldname src-data">Long Name</td>
        <td class="fieldvalue src-data"My Store/td>
        <td class="fieldname dest-data">Long Name</td>
        <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
</tbody>

这就是CSS：

body {
  padding: 10px;
}

.data-table {
  width: 100%;
  border-spacing: 0 4px;
  border-collapse: separate;

  thead tr th {
    border-collapse: separate; 
    border-spacing: 0 5px;
  }
  .title {
    border-bottom: 1px solid #bbb;
    text-align: left;
    border-spacing: 0 5px;
  }

  .side-title {
    transform: rotate(-90deg);
    width: 25px;
  }
  .fieldname {
    width: 130px;
  }
  .fieldvalue.dest-data input[type=text] {
    width: 100%;
  }
  .bodySection {
    border-bottom: 10px solid #bbb;
    margin-bottom: 10px;
  }
  tr {
    // border-bottom: 10px solid #bbb;
  }
}

感谢您的帮助。

Answer 1

替换你的标题（我在每个内部添加了一个div）：

<thead>
    <tr>
        <th></th>
  <th colSpan="2" class="title"><div>Source</div></th>
        <th colSpan="2" class="title"><div>Destination</div></th>
    </tr>
    <tr>
        <th></th>
        <th colSpan="1" class="fieldname title"><div>Field</div></th>
        <th colSpan="1" class="title"><div>Value</div></th>
        <th colSpan="1" class="fieldname title"><div>Field</div></th>
        <th colSpan="1" class="title"><div>Value</div></th>
    </tr>
</thead>

将.title替换为：

.title {
  text-align: left;
  padding-right: 5px;
}
tr .title:last-child {
  padding-right: 0px;
}
.title div {
  width: 100%;
  border-bottom: 1px solid #bbb;
}

你的.bodySection：

   .bodySection tr:last-child td { 
     border-bottom: 1px solid #bbb; 
     padding-bottom: 15px; 
  } 
  .bodySection tr:first-child td { 
    padding-top: 10px; 
  }

那是片段：

body {
  padding: 10px;
}

.data-table {
  width: 100%;
  border-spacing: 0 4px;
  border-collapse: separate;
}
  .title {
    text-align: left;
    padding-right: 5px;
  }
  tr .title:last-child {
    padding-right: 0px;
  }
  .title div {
    width: 100%;
    border-bottom: 1px solid #bbb;
  }

  .side-title {
    transform: rotate(-90deg);
    width: 25px;
  }
  .fieldname {
    width: 130px;
  }
  .fieldvalue.dest-data {
    padding-right: 5px;
  }
  .fieldvalue.dest-data input[type=text] {
    width: 100%;
  }
   .bodySection tr:last-child td { 
     border-bottom: 1px solid #bbb; 
     padding-bottom: 15px; 
  } 
  .bodySection tr:first-child td { 
    padding-top: 10px; 
  } 
  tr {
    // border-bottom: 10px solid #bbb;
  }

<table class="data-table">
	<thead>
		<tr>
			<th></th>
      <th colSpan="2" class="title"><div>Source</div></th>
			<th colSpan="2" class="title"><div>Destination</div></th>
		</tr>
		<tr>
			<th></th>
			<th colSpan="1" class="fieldname title"><div>Field</div></th>
			<th colSpan="1" class="title"><div>Value</div></th>
			<th colSpan="1" class="fieldname title"><div>Field</div></th>
			<th colSpan="1" class="title"><div>Value</div></th>
		</tr>
	</thead>
	<tbody class="bodySection">
		<tr>
			<td rowSpan="2" class="side-title">Name</td>
			<td class="fieldname src-data">Short Name</td>
			<td class="fieldvalue src-data"My Store/td>
			<td class="fieldname dest-data">Short Name</td>
			<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
		</tr>
		<tr>
			<td class="fieldname src-data">Long Name</td>
			<td class="fieldvalue src-data"My Store/td>
			<td class="fieldname dest-data">Long Name</td>
			<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
		</tr>
	</tbody>
	<tbody class="bodySection">
		<tr>
			<td rowSpan="2" class="side-title">Name</td>
			<td class="fieldname src-data">Short Name</td>
			<td class="fieldvalue src-data"My Store/td>
			<td class="fieldname dest-data">Short Name</td>
			<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
		</tr>
		<tr>
			<td class="fieldname src-data">Long Name</td>
			<td class="fieldvalue src-data"My Store/td>
			<td class="fieldname dest-data">Long Name</td>
			<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
		</tr>
	</tbody>
</table>

CSS表样式：行组的单独边框和边框

1 个答案: