I need help creating a table that resembles the design shown in the image below. I want each td cell in the outer table to have a number at the top right with a border, and text at the bottom left without a border:
https://i.sstatic.net/1YTkR.png
Currently, my code involves embedding tables within each cell to achieve this layout. However, I'm facing issues with applying borders only to the top right numbers as seen in the example image.
This is the CSS code snippet I am using:
<style>
caption {
font-size: 15px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
border-spacing: none;
width: 100%;
}
td,
th {
border-collapse: collapse;
text-align: center;
}
th {
border: 1px solid black;
padding: 8px;
}
td {
padding: none;
border: 1px solid black;
}
td .celltable tr td{
border:none;
}
table tr td .celltable > tr:first-child td:nth-child(2) {
border-collapse: collapse;
border: 8px solid black;
}
And here's the structure of the table:
<table id="tab1">
<thead>
<caption><b>Table 1:</b> Transportation Problem.</caption>
</thead>
<tbody>
<tr>
<th colspan="2" rowspan="2" style="border:none;"></th>
<th colspan="5">Destinations</th>
</tr>>
...
(Content continues with more table entries)
...
</tbody>
</table>
Is there a way to selectively remove borders from all cells except the top right one in the inner tables, while keeping the overall border structure intact? Alternatively, do you recommend a better alternative to using nested tables for alignment?