How do I increase the white space here between Column B and Column C (but not Column A and Column B)? I'm after something that will let me target a column very specifically, so I probably want inline CSS.
<html>
<style>
th {
background-color: #D8D8D8;
}
</style>
<table>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</html>
CodePudding user response:
<style>
td,
th {
border: 1px solid rgb(190, 190, 190);
padding: 10px;
}
td {
text-align: center;
}
tr:nth-child(even) {
background-color: #eee;
}
th[scope=col] {
background-color: #696969;
color: #fff;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200, 200, 200);
letter-spacing: 1px;
font-family: sans-serif;
font-size: .8rem;
}
</style>
<table>
<tr>
<th scope="col">Column A</th>
<th scope="col">Column B</th>
<th scope="col">Column C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
CodePudding user response:
<style>
th{
background-color: #D8D8D8;
}
td,
th {
padding: 10px;
}
td {
text-align: center;
}
table {
letter-spacing: 1px;
font-family: sans-serif;
font-size: .8rem;
}
</style>
<table>
<tr>
<th>Column A</th>
<th>Column B</th>
<th style="width: 0.1rem;background:none !important;"></th>
<th>Column C</th>
</tr>
<tr>
<td>1</td>
<td >2</td>
<th style="width: 0.1rem;background:none !important;"></th>
<td >3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<th style="width: 0.1rem;background:none !important;"></th>
<td>3</td>
</tr>
</table>