Databases
StackOverflow2013
Postsdbo
POHTML outer and inner table with different border color using CSS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML outer and inner table with different border color using CSS
    text
    copied!<p>I have a HTML table inside another table. Styles of both tables are defined in CSS. I want inner and outer table with different border color. But somehow inner table is taking border color of outer table. Below is the code -</p> <p><strong>HTML:</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="common.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;table width="100%" class="OuterTableStyle1"&gt;&lt;tr&gt;&lt;td&gt; &lt;table width="100%" class="CommonTableStyle1" &gt; &lt;tr&gt; &lt;th&gt;Title 1&lt;/th&gt; &lt;th&gt;Title 2&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Data 1&lt;/td&gt; &lt;td&gt;Data 2&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>/*======= Start : Common data table style =========*/ table.CommonTableStyle1 td { vertical-align:middle; padding:5px; font-size:11px; font-family:Arial; font-weight:normal; color:#000000; } table.CommonTableStyle1 th, table.CommonTableStyle1 td { border: 1px solid #525272 ; } table.CommonTableStyle1 { border-collapse:collapse; } /*======= End : Common data table style =========*/ /*=== Start : This table is used as border of another scrollable table ===*/ table.OuterTableStyle1 { border-collapse:collapse; } table.OuterTableStyle1 th, table.OuterTableStyle1 td { border: 1px solid red; } /*=== End : This table is used as border of another scrollable table ===*/ </code></pre> <p>Please help.</p> <p><strong>[Edited CSS]</strong></p> <pre><code>/*======= Start : Common data table style =========*/ table.CommonTableStyle1 td { vertical-align:middle; padding:5px; font-size:11px; font-family:Arial; font-weight:normal; color:#000000; } table.CommonTableStyle1 th, table.CommonTableStyle1 td { border: 1px solid #525272 ; } table.CommonTableStyle1 { border-collapse:collapse; } /*======= End : Common data table style =========*/ /*=== Start : This table is used as border of another scrollable table ===*/ table.OuterTableStyle1 { border-collapse:collapse; border: 1px solid red; } /*=== End : This table is used as border of another scrollable table ===*/ </code></pre>
 

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