table wider than div :(

[McLaren]

http://ylakiuglobosnamai.lt/darbo-uzmokestis

Hello, in this page I cannot find a way to make table less wide. It was probaly pasted from word to WICYWYG javascript text editor. I edited the html and removed all witdth attrivubtes, set it even to 50% as you can see if you open element inspector, it is not reacting :(

How can I make it less wide?

Pleas someone invet css which react to what you write :(

[cmps]

Dear SPeed, try to remove the padding-left: 11px; or padding-right: 11px; for the td this will fix the size.

[JorgeM]

Your problem appears to be with the first few rows of the table. especially these rows...

    <tr>
    <td style="text-align: justify;" rowspan="2" valign="bottom">
<p><strong>Eil.</strong></p>
<p><strong>Nr.</strong></p>
</td>
<td rowspan="2" valign="bottom">
<p style="text-align: center;"><strong>Pareigų (pareigybės) pavadinimas</strong></p>
<p><strong>&nbsp;</strong></p>
</td>
<td rowspan="2" valign="bottom">
<p style="text-align: center;"><strong>Etatų </strong></p>
<p style="text-align: center;"><strong>skaičius</strong></p>
<p><strong>&nbsp;</strong></p>
</td>
<td colspan="5" valign="top">
<p style="text-align: center;"><strong>Vidutinis mėnesinis bruto darbo   užmokestis (Lt)</strong></p>
</td>
</tr>
<tr>
<td>
<p style="text-align: center;"><strong>2011 m.</strong></p>
</td>
<td>
<p><strong>2012 m. </strong></p>
<p><strong>1 ketv.</strong></p>
</td>
<td>
<p><strong>2012 m.</strong></p>
<p><strong> 2 ketv.</strong></p>
</td>
<td>
<p><strong>2012 m. </strong></p>
<p><strong>3 ketv.</strong></p>
</td>
<td>
<p><strong>2012 m.&nbsp;</strong></p>
<p><strong>4 ketv.</strong></p>
</td>
</tr>

When I remove these rows from your table, the display looks as expected...

[cmps]

After double checking, you have the div id="main" which is the left part to have a width of 550px;
So the table should be 550px unless you force it the be wider.
You are padding 22px (left+right) in each rectangle 'td', and you have 8 'td' per row 'tr'
so 8x22 = 176px on padding + 10px on margin-left for the div main, and for the first 2 rows, you used the <p> which has a 10px padding on each side so 20x8=160px
so in total you have 346px only on padding and margin.
I think it's a lot!!

So to solve this.
add this css at the end of of the style tag

#main table p {
    padding: 0;
}

and the problem is solved :)

[Bachu]

Change your td css to

td {
    background-color: #EEEEEE;
    border-bottom: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    padding: 0 10px 0 0;
}

[McLaren]

Oh, so many answers, thank you guys, especialy the one who wrote this:

#main table p {
    padding: 0;
}

Not all I tested after saw that this works.

[cmps]

You are Welcome :)