Databases
StackOverflow2013
Postsdbo
POBorder expanding table but cutting off background image
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBorder expanding table but cutting off background image
    text
    copied!<p>I have created a fiddle of my problem in a fiddle here: <a href="http://jsfiddle.net/tpSjf/" rel="nofollow">http://jsfiddle.net/tpSjf/</a></p> <p>I'm adding a border on the table, but only for the rows, now the border expands the width of the table by 2px so I've made the width 938px. This correct the width problem but cuts off part of the image in the header.</p> <p>Overflow doesn't seem to work as it is a background.</p> <p>You may be wondering why I haven't just set the border for the whole table, well as its rounded corners and a background image it gets 'devil horns' as the corners are transparent.</p> <p>Example HTML</p> <pre><code>&lt;table class="table_style orange_header" class="ajax_table" style="font-size:12px;"&gt; &lt;tr&gt; &lt;th style="width:248px;"&gt;Name&lt;/th&gt; &lt;th style="width:314px;"&gt;Email&lt;/th&gt; &lt;th style="width:237px;"&gt;Last Login&lt;/th&gt; &lt;th style="width:75px;"&gt;Options&lt;/th&gt; &lt;/tr&gt; &lt;tr class="alternate"&gt; &lt;td&gt;&lt;a href="#"&gt;Example name&lt;/a&gt;&lt;/td&gt; &lt;td&gt;Example Email&lt;/td&gt; &lt;td&gt;Examlpe Email&lt;/td&gt; &lt;td&gt;&lt;a href="#"&gt;Edit&lt;/a&gt;&lt;a class="crossbtn" href="#"&gt;&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>Example CSS</p> <pre><code>table { border-collapse:collapse; border-spacing:0; table-layout: fixed; } .table_style { width: 938px; overflow:visible; } th { height: 45px; } .alternate { height: 50px; background-color: #f0f0f0; border-left: #888 1px solid; border-right: #888 1px solid; } .orange_header { background:url(http://i1135.photobucket.com/albums/m621/Iwuqisubu/orange_table_background_zps47f8dbe4.png) no-repeat; } </code></pre> <p><strong>Please expand the output on jsfiddle if your monitor is not wide enough to see the problem</strong></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload