Structured Data Formatting with Traditional Table Tags
Is it a joke or perhaps not?
<table class="table">
<tr><th>Id</th> <th>Name</th> <th>Email address</th></tr>
<tr><td>100001</td> <td>Joe</td> <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="246945494d4174724d484845484b464b576450414841534b56490a5157">[email protected]</a></td></tr>
<tr><td>100</td> <td>Christine</td> <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01426973687275686f644b56686d6d68606c72416560787364712f626e6c">[email protected]</a></td></tr>
<tr><td>1001</td> <td>John</td> <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ac0e5e2e4c6c7e3e6eff3caeeebf3f8effaa4e9e5e7">[email protected]</a></td></tr>
</table>
Utilizing the Grid System for Layout
Upon reviewing the documentation regarding the bootstrap grid system, no auto-width building blocks were identified. The default components have set widths and columns:
<div class="row">
<div class="span2">ID</div>
<div class="span2">Name</div>
<div class="span8">E-Mail</div>
</div>
<div class="row">
<div class="span2">100001</div>
<div class="span2">Joe</div>
<div class="span8"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0bd919d9995a0a6999c9c919c9f929f83b084959c95879f829dde8583">[email protected]</a></div>
</div>
<div class="row">
<div class="span2">100</div>
<div class="span2">Christine</div>
<div class="span8"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ce8da6bca7bdbaa7a0ab8499a7a2a2a7afa3bd8eaaafb7bcabbee0ada1a3">[email protected]</a></div>
</div>
Thus, creating a custom version for a 3-column-table with adjustable width is necessary.
In my example, the grid column will adapt based on available space.
Enhanced Markup for Creativity
My demo now features a unique class that aligns closely with your requirements.
<div class="row">
<div class="spanFl">100000001 <br />
100
</div>
<div class="spanFl">Joe <br/>
Christine
</div>
<div class="spanFl"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="743915191d1124221d181815181b161b073400111811031b06195a0107">[email protected]</a> <br />
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d7e554f544e49545358776a545151545c504e7d595c444f584d135e52550'd_>€&Ω¢è(:==43 “£¥₰∘≠∆"></a>
</div>
</div>
Implementing css-3 Display Tables
An article on tutsplus introduces using css-3 display: table for a table-like layout. However, without three divs per row, wrapping issues may persist.
#content {
display: table;
}
#mainContent {
display: table-cell;
width: 620px;
padding-right: 22px;
}
aside {
display: table-cell;
width: 300px;
}
Responsive Design in Bootstrap
Based on the bootstrap documentation, there isn't an out-of-the-box solution for a 3-column layout with flexible widths. As mentioned in the responsive design section, "Use media queries responsibly and only as a start to your mobile audiences."
Could you provide further insight into why using a traditional table may not be suitable?