How to convert encoded Preeti font text to unicode leaving English words as it is in Python?
I have the following table with nested tables. Why is the border collapse property not working for my HTML table.
I have added the border-collapse property on both the main table and the nested tables. All I see are the outer borders and no inside borders.
<table style="border-collapse: collapse;">
<tr>
<th>Existing data</th>
<th>New table</th>
</tr>
<tr>
<td>
<!-- Nested Table 1 -->
<table style="border-collapse: collapse;">
<tr>
<th>Hostname</th>
<th>IP</th>
<th>MAC</th>
</tr>
<tr>
<td>ftp01</td>
<td>10.1.1.4</td>
<td>...01</td>
</tr>
<tr>
<td>www01</td>
<td>10.1.1.5</td>
<td>...02</td>
</tr>
</table>
</td>
<td>
<!-- Nested Table 2 -->
<table style="border-collapse: collapse;">
<tr>
<th>IP</th>
<th>MAC</th>
<th>Owner</th>
</tr>
<tr>
<td>10.1.1.4</td>
<td>...bb</td>
<td>alice</td>
</tr>
<tr>
<td>10.1.1.6</td>
<td>...cc</td>
<td>bob</td>
</tr>
<tr>
<td>10.1.1.7</td>
<td>...dd</td>
<td>chris</td>
</tr>
<tr>
<td>10.1.1.4</td>
<td>...ee</td>
<td>doug</td>
</tr>
</table>
</td>
</tr>
</table>
Answers
The border-collapse property is indeed applied to your main table and nested tables, but the issue is likely caused by the absence of borders on the nested tables' cells (<td> elements).
To ensure that borders are displayed properly, you need to add the border property to the <td> elements in your nested tables. Here's your HTML code with borders added to the nested tables' cells:
<table style="border-collapse: collapse;">
<tr>
<th>Existing data</th>
<th>New table</th>
</tr>
<tr>
<td>
<!-- Nested Table 1 -->
<table style="border-collapse: collapse; border: 1px solid black;">
<tr>
<th>Hostname</th>
<th>IP</th>
<th>MAC</th>
</tr>
<tr>
<td style="border: 1px solid black;">ftp01</td>
<td style="border: 1px solid black;">10.1.1.4</td>
<td style="border: 1px solid black;">...01</td>
</tr>
<tr>
<td style="border: 1px solid black;">www01</td>
<td style="border: 1px solid black;">10.1.1.5</td>
<td style="border: 1px solid black;">...02</td>
</tr>
</table>
</td>
<td>
<!-- Nested Table 2 -->
<table style="border-collapse: collapse; border: 1px solid black;">
<tr>
<th>IP</th>
<th>MAC</th>
<th>Owner</th>
</tr>
<tr>
<td style="border: 1px solid black;">10.1.1.4</td>
<td style="border: 1px solid black;">...bb</td>
<td style="border: 1px solid black;">alice</td>
</tr>
<tr>
<td style="border: 1px solid black;">10.1.1.6</td>
<td style="border: 1px solid black;">...cc</td>
<td style="border: 1px solid black;">bob</td>
</tr>
<tr>
<td style="border: 1px solid black;">10.1.1.7</td>
<td style="border: 1px solid black;">...dd</td>
<td style="border: 1px solid black;">chris</td>
</tr>
<tr>
<td style="border: 1px solid black;">10.1.1.4</td>
<td style="border: 1px solid black;">...ee</td>
<td style="border: 1px solid black;">doug</td>
</tr>
</table>
</td>
</tr>
</table>
By adding border: 1px solid black; to the inline style of the <td> elements within the nested tables, you ensure that borders are displayed around each cell. Adjust the border style as needed to fit your design preferences.
