Fixed table rounding, partially
Update backgrounds.php, intro.php, and 9 more files...
This commit is contained in:
@@ -13,26 +13,26 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
</div>
|
||||
<section class="p-s">
|
||||
|
||||
<div class="bkgd-red t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
|
||||
⚠️ These styles will change before the 1.0.0 release ⚠️
|
||||
<div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
|
||||
⚠️ These styles require a special workaround to work properly ⚠️
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-xxs">Stylish table</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-xxs">
|
||||
Tables can quickly be styled by simply using the following classes:
|
||||
Tables can quickly be styled by simply using the <span class="code">.table-stylish</span> class.
|
||||
</p>
|
||||
<ul class="mb-s list-bullets list-bullet-manual ml-xs">
|
||||
<li><span class="code">stylish</span> - Adds colors to cells and makes headers bold</li>
|
||||
<li><span class="code">table-p-xs</span> - Adds a <i>xs</i> padding to all cells</li>
|
||||
<li><span class="code">table-p-s</span> - Adds an <i>s</i> padding to all cells</li>
|
||||
<li><span class="code">table-h-p-s</span> - Adds an <i>s</i> padding to the header cells</li>
|
||||
</ul>
|
||||
<table class="stylish table-p-s border">
|
||||
<tr>
|
||||
<p class="mb-xs">
|
||||
However, due to browsers inability to stay consistent, they cannot be rounded as easily as other elements.<br>
|
||||
Therefore, the <span class="code">.o-hidden</span> is automatically applied to the table itself.<br>
|
||||
A cleaner fix could have been implemented, but it would have decently inflated the stylesheet's size.
|
||||
</p>
|
||||
<table class="table-stylish table-p-s border r-l">
|
||||
<thead>
|
||||
<th>Head 1</th>
|
||||
<th>Head 2</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Cell 1.1</td>
|
||||
<td>Cell 1.2</td>
|
||||
@@ -41,12 +41,13 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<td>Cell 2.1</td>
|
||||
<td>Cell 2.2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<code class="d-block p-xxs border r-s mt-s">
|
||||
table<b>.stylish.table-p-s.border</b><br>
|
||||
th>td*2<br>
|
||||
tr*2>td*2
|
||||
table<b>.table-stylish.table-p-s.border.o-hidden</b><br>
|
||||
thead>th>td*2<br>
|
||||
tbody>tr*2>td*2
|
||||
</code>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
Reference in New Issue
Block a user