I’m trying to develop a message box in HTML with the following code:
table {
border: 1px solid;
border-color: lightgray;
border-width: 1px;
border-radius: 8px;
padding: 10px;
}
.table_header {
border-bottom: 1px solid;
border-color: lightgray;
border-width: 1px;
}<table>
<tr>
<td class="table_header">Title</td>
</tr>
<tr>
<td>Example message</td>
</tr>
</table>The border (line) between the Title and the Example message should contact the border of the table. How can I do this?
>Solution :
Remove the padding and border-spacing on the table, and add padding to the cells:
table {
border: 1px solid;
border-color: lightgray;
border-width: 1px;
border-radius: 8px;
border-spacing: 0;
}
.table_header {
border-bottom: 1px solid;
border-color: lightgray;
border-width: 1px;
}
td {
padding: 10px;
}<table>
<tr>
<td class="table_header">Title</td>
</tr>
<tr>
<td>Example message</td>
</tr>
</table>