Span with table display

by brian428

HTML

<table style="border: 1px solid black">
  <tr>
    <td style="border: 1px solid black">Item 1</td>
    <td style="border: 1px solid black">Item 2</td>
    <td style="border: 1px solid black">Item 3</td>
  </tr>
  <tr>
    <td style="border: 1px solid black">Item 111</td>
    <td style="border: 1px solid black">Item 222</td>
    <td style="border: 1px solid black">Item 3333</td>
  </tr>
</table>

<br><br>

<span style="display: table; border: 1px solid black;">
  <span style="display: table-row;">
    <span style="display: table-cell; border: 1px solid black; padding: 3px;">Item 1</span>
    <span style="display: table-cell; border: 1px solid black; padding: 3px;">Item 2</span>
    <span style="display: table-cell; border: 1px solid black; padding: 3px;">Item 3</span>
  </span>
  <span style="display: table-row;">
    <span style="display: table-cell; border: 1px solid black; padding: 3px;">Item 111</span>
    <span style="display: table-cell; border: 1px solid black; padding: 3px;">Item 222</span>
    <span style="display: table-cell; border: 1px solid black; padding: 3px;">Item 33333</span>
  </span>
</span>

<br><br>

<span class="plotly-legend2-table">
  <span class="plotly-legend2-table-row">
    <span class="plotly-legend2-table-cell">Item 1</span>
    <span class="plotly-legend2-table-cell">Item 2</span>
    <span class="plotly-legend2-table-cell">Item 3</span>
  </span>
  <span class="plotly-legend2-table-row">
    <span class="plotly-legend2-table-cell">Item 111</span>
    <span class="plotly-legend2-table-cell">Item 222</span>
    <span class="plotly-legend2-table-cell">Item 33333</span>
  </span>
</span>

CSS

.plotly-legend2-table {
  display: table;
}

.plotly-legend2-table-row {
  display: table-row;
}

.plotly-legend2-table-cell {
  display: table-cell;
  padding: 2px 5px;
}

/*
table    { display: table }
tr       { display: table-row }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
*/