CODEWITHSUNDEEP
htmlcsshtml-table
LocEngineer
LocEngineer

Reputation: 2917

Border of nested table - want none, got one

This one makes me feel stupid. I want to split a certain cell in a table, and I want it to not have a border. The parent table does have a border, which is set in css:

table, thead, tbody, th, tr, td, input
 {
     clear: both;
     font-size: 11pt;
     padding: 0;
     margin: 0;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
 }
table, thead, tbody, th, tr, td {
    border: 1px solid black;
    border-collapse: collapse;
}

In order to split the desired cell, I create a nested table with inline style set to border:0 like this (here shown surrounding parent table with only affected th and value td within:

<table style="table-layout: fixed;">
  <tbody>
    <tr style="background-color: linen">
        <th>
            <table style="table-layout: fixed; border: 0">
                <tr style="border: 0">
                    <th style="text-align: center;border: 0">
                        <label>NDA</label>
                    </th>
                    <th style="text-align: center;border: 0">
                        @Html.LabelFor(m => m.Mailshot, "Mailshot")
                    </th>
                </tr>
            </table>
        </th>
    </tr>
    <tr style="background-color: linen">
        <td>
            <table style="border: 0">
                <tr style="border: 0">
                    <td style="text-align: center; border: 0;width: 50%">
                        <input type="checkbox" style="border: none" value="@Model.NdaSigned" name="NdaSigned" id="NdaSigned"/>
                    </td>
                    <td style="text-align: center; border: 0;width: 50%">
                        <input type="checkbox" value="@Model.Mailshot" name="Mailshot" id="Mailshot"/>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
  </tbody>
</table>

As you can see, I have already tried about everything I could think of to make sure the nested table does NOT have a border. (P.S: border:none has the same non-effect).

Yet, this is what it looks like:

enter image description here

I wouldn't terribly mind a 1px vertical border in the middle but I certainly do NOT want a surrounding border within the cell.

What am I doing wrong?

Upvotes: 0

Views: 788

Answers (1)

Mr Lister
Mr Lister

Reputation: 46539

Tables always have tbodies, even if you don't write <tbody> explicitly. So each of the inner tables has a tbody with a border of 1px solid black as per your css.

Solutions are to either put <tbody style="border:0"> in the inner tables, or to remove the tbody selector from the css. (The latter would be preferred, since you don't actually need to style tbodies in the first place except in very specialised circumstances.)

Upvotes: 1

Related Questions