JSFiddle

  • visible rowspan cell inside collapsed row

    No-Library (pure JS), HTML, CSS, JavaScript

    Original table
    <table>
      <col><col><col>
      <tr>
        <td rowspan="2">Red spanner</td>
        <td>Blue top</td>
        <td>Green top</td>
      </tr>
      <tr>
        <td>Blue bottom</td>
        <td>Green bottom</td>
      </tr>
    </table>
    <br>
    Collapse <i>top</i> row: visible row-spanning cell <i>starts</i> in ...
  • table in flex bug

    No-Library (pure JS), HTML, CSS, JavaScript

    <div id="flexbox" style="display:flex">
      <table style="border-collapse:collapse">
        <td>Some text</td>
      </table>
    </div>
    After
    
  • crbug auto column calc w/colspan

    No-Library (pure JS), HTML, CSS, JavaScript

    FF/Edge agree: item3 has no black.
    Chrome treats width:0px and no style the same.
    If the last td ...
  • break-inside:avoid

    No-Library (pure JS), HTML, CSS, JavaScript

    <p>There should be three squares below.</p>
    <div style="columns:3; column-fill:auto; height:140px;">
      <table cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <div></div>
          </td>
        </tr>
        <tr>
          <td>
            <div></div>
          </td>
        </tr>
        <tr>
          <td>
            <div></div>
          </td>
        </tr>
      </table>
    </div>
    
  • cellpadding cellspacing

    No-Library (pure JS), HTML, CSS, JavaScript

    Default border-spacing is 2px.<br>
    To get cellpadding=0 cellspacing=0 set <code>table { border-spacing: 0px }</code> and padding: 0px
    <table>
      <tr>
        <td>dogs</td>
        <td>cats</td>
      </tr>
    </table>
    
  • calc on td ignored

    No-Library (pure JS), HTML, CSS, JavaScript

    <table>
    	<tr>
    		<td>A</td>
    		<td>B</td>
    		<td>C</td>
    	</tr>
    </table>
    
    <table>
    	<tr>
    		<td style="width:calc(20px + 50%)">A+B</td>
    		<td style="display:none"></td>
    		<td>C</td>
    	</tr>
    </table>
  • col calc width crash

    No-Library (pure JS), HTML, CSS, JavaScript

    log.innerText = cell1.offsetWidth;
    
  • col calc width

    No-Library (pure JS), HTML, CSS, JavaScript

    log.innerText = cell1.offsetWidth;
    
  • fixed: 2px 8px 20px

    No-Library (pure JS), HTML, CSS, JavaScript

    log.innerText = cell1.offsetWidth + " " + cell2.offsetWidth + " " + cell3.offsetWidth;
  • fixed excess: proportions

    No-Library (pure JS), HTML, CSS, JavaScript

    log.innerText = cell1.offsetWidth + " " + cell2.offsetWidth + " " + cell3.offsetWidth;