Note that there are some explanatory texts on larger screens.

plurals
  1. POHaving two html table cells total width stay within given width?
    primarykey
    data
    text
    <p>I have an html table using <code>colspan=2</code> to merge cells. I need to make sure merged cells have a given width. However, when two cells are not merged, I need to have their total width not exceed the width of the merged cells. How can I achieve the latter?</p> <p><img src="https://i.stack.imgur.com/MPK5k.jpg" alt="enter image description here"></p> <p>In the first table, the text in the merged cells is wrapped, which is fine.</p> <p>In the second table, the text in the non-merged cells is not wrapped, which makes the table too wide. </p> <p>I have created a <a href="http://jsfiddle.net/nZUjE/" rel="nofollow noreferrer">JSFiddle</a>.</p> <p>My html is:</p> <pre><code>&lt;table border="1"&gt; &lt;tr&gt; &lt;td&gt;xyz 1&lt;/td&gt; &lt;td&gt;xyz 2&lt;/td&gt; &lt;td&gt;xyz 3&lt;/td&gt; &lt;td&gt;xyz 4&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2" class="twoColWidth"&gt; xyz aaaa ffffffffffffff &lt;/td&gt; &lt;td colspan="2" class="twoColWidth"&gt; xyz bbbb fff &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;br /&gt; &lt;table border="1"&gt; &lt;tr&gt; &lt;td&gt;xyz 1 33333 444444&lt;/td&gt; &lt;td&gt;xyz 2&lt;/td&gt; &lt;td&gt;xyz 3&lt;/td&gt; &lt;td&gt;xyz 4 33333 444444&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2" class="twoColWidth"&gt; xyz aaaa ffffffffffffff &lt;/td&gt; &lt;td colspan="2" class="twoColWidth"&gt; xyz bbbb fff &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>and my CSS is:</p> <pre><code>.twoColWidth { width: 50px; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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