表格中从一个单元格到另一个单元格的对齐问题

Question

I have an alignment issue where the alignment of the background color of the first cell is little more compared to the other cell. I don't know why is it happening.

As in the screen shot the cell which has week has the alignment little higher compared to other cell. Why is this happening ?

How am I supposed to make it aligned properly? Please help me.

Answer 1

I updated your fiddle and added some background colors to it, as you can see in below html fragment.

<td style="text-align: left; padding-left: 10px;background-color: lime" >
    <div class="ng-binding" ng-class="{'TODAY': 'todayDate'}[event.dayType]">Fri 1.</div>
</td>
<td colspan="7" style="background-color: red">
    <table id="test" style="table-layout: fixed;background-color: aqua">
    <tbody>

I've been trying to reset some of those element's CSS value, though they don't kick in, which makes me believe there is other settings somewhere in your CSS files using the same properties, likely with !important .

So, if you check the fiddle you'll see that the recolored td's is different in height and that should narrow down your problem.

Now it would be easier for your to check those settings, alter them some, to see how you can give them the same height.

One observation I made is, if you add a text like this <td colspan="7" style="background-color: red"> Test text <table id="test" , you'll see that the red background appear and that background color doesn't have the alignment issue.

Here is one more fiddle update showing that: https://jsfiddle.net/enypgyt3/4/

Answer 2

<p>You should use proper table format like</p>
<p>Table should be proper nested </p>
<p>Table td and tr is not nested properly</p>
<p>Try to comment every table row(tr)</p>
<table border="1" cellspacing="0" cellpadding="5"> <!--table start------->
    <tr>    <!--tr start-->
        <td> 
            <table> 
                <tr>
                    <td>one</td>
                    <td>Two</td>
                    <td>Three</td>
                    <td>four</td>
                </tr>
            </table> <!--/table inside td open and it should properly closed-->
        </td>
        <td>Five</td>
        <td>Six</td>
        <td>Seven</td>
        <td>Eight</td>
    </tr>   <!--/tr end-->

    <tr>    <!--second row statr-->
            <td colspan="4"> <!-- User proper Colspan for every td -->
                One-four five six seven 
            </td>
            <td>
                Eight
            </td>
    </tr>   <!--second row stard-->
    <tr> <!--Third row start-->
            <td colspan="5">
                One-four five six seven eight
            </td>
    </tr>
    <tr>
            <td>One-four</td>
            <td>Five</td>
            <td>Six</td>
            <td>Seven</td>
            <td>Eight</td>
    </tr>
</table> 
<p>If possible try comment maximum tr and td </p>
<p>Follow code indentation</p>