I have a blog on Wordpress and I want to create a stylish colourful table on my blog please. Suggest me code for my blog
As #Alex pointed out, the material color palette is a modern and nice way to get colors. All you would need to do is apply it to the different segments of your table.
.myTable {
width: 500px;
border-collapse: collapse;
border-bottom: 1px solid #f44336;
font-family: sans-serif;
}
/* Header */
.myTable thead th {
background: #f44336;
color: #fff;
padding: 3em 1em 1em 1em;
font-weight: 400;
text-align: left;
}
.myTable thead th:nth-child(1) {
font-weight: 600;
}
/* Rows */
.myTable tbody tr td {
padding: 1em;
}
.myTable tbody tr:nth-child(even) td {
background: #ffcdd2;
}
.myTable tbody tr td:nth-child(1) {
font-weight: 600;
}
<table class="myTable">
<thead>
<tr>
<th>Row 1</th>
<th>Row 2</th>
<th colspan="2">Row 3 and 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
<td>2,4</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
<td>3,4</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
<td>4,4</td>
</tr>
</tbody>
</table>
Related
Hey guys im trying to figure out why my table keeps doing this when I switch to the mobile version, ive tried multiple different CSS edits to fix it, but whenever I got into mobile it shows like this
Table in mobile
Try this Modified some styles and added width to the <th> tags.
CSS:
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
font-size:13px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
th, td {
padding: 8px;
text-align: center;
}
table#t01 tr:nth-child(even) {
background-color: #fff;
}
table#t01 tr:nth-child(odd) {
background-color: #eee;
}
table#t01 th {
background-color: #eee;
}
TABLE:
<table id="t01">
<tr>
<th>Size</th>
<th>Bust</th>
<th>Sleeve</th>
<th width="20%">Shoulder</th>
<th width="15%">Length</th>
</tr>
<tr>
<td>S</td>
<td>102</td>
<td>61</td>
<td>45</td>
<td>37</td>
</tr>
<tr>
<td>M</td>
<td>106</td>
<td>62</td>
<td>46</td>
<td>38</td>
</tr>
<tr>
<td>L</td>
<td>110</td>
<td>63</td>
<td>47</td>
<td>39</td>
</tr>
</table>
I have a website that is connected to a database. The website has a table that pulls out the values from the database. I want this table to be responsive. I have almost got it to work except one part. Everything is showing and working except for the titles(Band Name, City, Role, Style, SKill). They wont show. I think it has something to do with the last CSS code (content attribute). If someone has experience or can help out, I would highly appreciate it! Take a look at the photo to to see what I mean
screenshot from problem
.table td,
.table th {
padding: 12px 15px;
border: 1px solid #ddd;
text-align: center;
font-size: 16px;
}
.table tbody tr:nth-child(even) {
background-color: #e7e7e7;
}
#media(max-width: 500px) {
.table thead {
display: none;
}
.table,
.table tbody,
.table tr,
.table td {
display: block;
width: 100%;
}
.table tr {
margin-bottom: 15px;
}
.table td {
text-align: right;
padding-left: 50%;
text-align: right;
position: relative;
}
.table th::before {
content: attr(scope);
position: absolute;
left: 0;
width: 50%;
padding-left: 15px;
font-size: 15px;
font-weight: bold;
text-align: left;
}
}
<div class="band-finder-table">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Band Name</th>
<th scope="col">City</th>
<th scope="col">Role</th>
<th scope="col">Style</th>
<th scope="col">Skill</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr th:each="band : ${bands}">
<td th:text="${band.bandName}">Band Name</td>
<td th:text="${band.city}">City</td>
<td th:text="${band.role.roleName}">Role Name</td>
<td th:text="${band.style.styleName}">style Name</td>
<td th:text="${band.skill.level}">Level</td>
<td><a th:href="#{/band(id=${band.id})}">Edit</a></td>
<td><a th:href="#{/band/delete(id=${band.id})}">Remove</a></td>
</tr>
</tbody>
</table>
I got the help of a friend to answer this question
The code that had to be changed is:
HTML:
<td data-label="Band Name"th:text="${band.bandName}">Band Name</td>
And
CSS:
.table td::before{
content: attr(data-label);
I'm trying to create a table with rounded top corners and a different background color for the header line. I succeeded in making both individually (super beginner in html/css) thanks to online ressources but I fail when it comes to have the two at the same time.
What I mean is (and you can see it in the fiddle below), I can round the corners just fine and have the design I want for my table except that the header background-color is still a perfect rectangle and thus is overflowing outside the rounded corners.
I tried adding the border-radius property in various places but none worked the way I intended. How can I make the corners rounded and having the thead background-color fitting nicely in it ?
table.std {
margin-top: 0.2cm;
width: 100%;
border: 0.03cm solid #8a8a8a;
border-spacing: 0;
border-radius: 15px 15px 0px 0px;
font-size: 10pt;
}
table.std thead {
text-align: left;
background-color: lightgray;
height: 25px;
}
table.std thead tr th:first-child {
padding-left: 0.25cm;
/* To align with section title */
border-bottom: 0.03cm solid #8a8a8a;
}
table.std tbody tr td:first-child {
padding-left: 0.25cm;
/* To align with section title */
width: 30%;
}
table.std tbody tr td {
border-bottom: 0.01cm dashed lightgray;
height: 20px;
}
<div>
<table class="std">
<thead>
<tr>
<th colspan=2>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID</td>
<td>id1</td>
</tr>
<tr>
<td>Date</td>
<td>2019/12/19</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
<tr>
<td>lorem</td>
<td>ipsum</td>
</tr>
<tr>
<td>john</td>
<td>doe</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/co7xb42n/
Thanks for the help
Add the border-radius to th
table.std thead tr th:first-child {
padding-left: 0.25cm; /* To align with section title */
border-bottom: 0.03cm solid #8a8a8a;
border-radius: 15px 15px 0px 0px;
}
https://jsfiddle.net/53eshg64/
add border-radius from th tag.
table.std {
margin-top: 0.2cm;
width: 100%;
border: 0.03cm solid #8a8a8a;
border-spacing: 0;
border-radius: 15px 15px 0px 0px;
font-size: 10pt;
}
table.std thead {
text-align: left;
background-color: lightgray;
height: 25px;
}
table.std thead tr th:first-child {
padding-left: 0.25cm; /* To align with section title */
border-bottom: 0.03cm solid #8a8a8a;
border-radius: 15px 15px 0px 0px;
}
table.std tbody tr td:first-child {
padding-left: 0.25cm; /* To align with section title */
width: 30%;
}
table.std tbody tr td {
border-bottom: 0.01cm dashed lightgray;
height: 20px;
}
<div>
<table class="std">
<thead>
<tr>
<th colspan=2>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID</td>
<td>id1</td>
</tr>
<tr>
<td>Date</td>
<td>2019/12/19</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
<tr>
<td>lorem</td>
<td>ipsum</td>
</tr>
<tr>
<td>john</td>
<td>doe</td>
</tr>
</tbody>
</table>
</div>
This is cause the th tag is above of the table tag and it doesn't have any border-radius
Add the border-radius to th
I have a table compiled with data and am having positioning problems with overlapping rows and styling properties. I have tried tweaking the CSS but nothing really worked.
below is my HTML table
<table class="ui-widget" id="lines">
<tbody>
<tr>
<th>Line Item Number</th>
<th>Line Item Date</th>
<th>Unit Cost</th>
<th>Number of Units</th>
<th>Line Item Total</th>
<th>Task Code</th>
<th>Expense Code</th>
<th>Timekeeper ID</th>
<th>Line Item Description</th>
</tr>
<tr class="errortrue">
<td>1</td>
<td>20150301</td>
<td>1</td>
<td>1</td>
<td>4</td>
<td></td>
<td>E1</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="9" class="error">
Line : 1 NULL Value is not in the defined list for LINE ITEM TAX TYPE<br/>
Line : 1 MATTER NAME is a required field<br/>
Line : 1 BILLING END DATE is a required field<br/>
Line : 1 INVOICE DATE is a required field<br/>
Line : 1 BILLING START DATE is a required field<br/>
</td>
</tr>
<tr class="errortrue">
<td>2</td>
<td>20150304</td>
<td>2</td>
<td>2</td>
<td>6</td>
<td></td>
<td>E2</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="9" class="error">
Line : 2 NULL Value is not in the defined list for LINE ITEM TAX TYPE<br/>
</td>
</tr>
<tr class="errortrue">
<td>3</td>
<td>20150306</td>
<td>3</td>
<td>3</td>
<td>12</td>
<td>T3</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="9" class="error">
Line : 3 NULL Value is not in the defined list for LINE ITEM TAX TYPE<br/>
</td>
</tr>
</tbody>
</table>
CSS:
<style>
td error { color: red; font-size: 100%;}
tr.errortrue { color: #c33; font-size: 100%; font-weight: bold;}
table.lines th { background-color : grey; color: white; padding: 5px;}
table {empty-cells: show; border-collapse: collapse; }
table.lines td { text-align: center;}
table.header { float: left; }
table.header th { text-align: left; }
table.header td{ text-align: right; }
table.header td.right{ text-align: left; }
table.header tfoot th { text-align: left; background: #ebebeb}
table.header tfoot td { text-align: right; background: #ebebeb}
td.right, th.right { text-align: right; }
</style>
Here are the snapshots of CSS in Chrome
Invoice Line Items Table CSS
[1]: http://i.imgur.com/cq72QUU.png
tr css
[2]: http://i.imgur.com/jSV6XZJ.png
I am a beginner at CSS. Can someone please help me with this?
Try adding this css
th {
padding:10px;
margin:10px;
}
td {
padding:10px;
margin:10px;
}
Manipulate it the way you want. here is the jfiddle link. Good luck. http://jsfiddle.net/JoshuaHurlburt/avttkdst/2/
Have a look at this Fiddle I noticed you are assigning a class to the id lines in your css when it should be and id. Example you have table.lines th which should really be table#lines th unless you change in your html <table class="ui-widget" id="lines"> to <table class="ui-widget" class="lines">
CSS:
table#lines td.error {
color: red;
font-size: 100%;
text-align:left;
padding-left:15px;
}
th {
margin:5px;
padding:5px;
}
td {
padding:10px;
margin:10px;
}
tr.errortrue {
color: #c33;
font-size: 100%;
font-weight: bold;
}
table#lines th {
background-color : grey;
color: white;
padding: 5px;
}
table {
empty-cells: show;
border-collapse: collapse;
}
table#lines td {
text-align: center;
}
.align-left {
text-align:left;
}
table.header {
float: left;
}
table.header th {
text-align: left;
}
table.header td {
text-align: right;
}
table.header td.right {
text-align: left;
}
table.header tfoot th {
text-align: left;
background: #ebebeb
}
table.header tfoot td {
text-align: right;
background: #ebebeb
}
td.right, th.right {
text-align: right;
}
I applied some changes to this fiddle which may be what you are looking for. Let me know.
Below is a small simple table as an example. I want the header row to be of one color (grey). The alternate rows below header to be of another color (yellow). And the first column of another color (orange).
I am not able to achieve the desired results with the CSS. How do I go about it without individually coloring the cells.
Code in JSFiddle
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 5px;
}
table {
width: 100%;
}
th {
background-color: grey;
color: white;
}
tr:nth-child(odd) {
background-color: yellow;
}
<table>
<col style="background-color: orange;" />
<tr>
<th> </th>
<th>Bank</th>
<th>Amount</th>
</tr>
<tr>
<td>John</td>
<td>ABC</td>
<td>12345</td>
</tr>
<tr>
<td rowspan="2">David</td>
<td>DEF</td>
<td>456789</td>
</tr>
<tr>
<td>GHI</td>
<td>147258</td>
</tr>
<tr>
<td>Kevin</td>
<td>JKL</td>
<td>258369</td>
</tr>
<tr>
<td>Mike</td>
<td>MNO</td>
<td>369258</td>
</tr>
</table>
It's not a very good solution but here is a fix:
http://jsfiddle.net/sthmw0dk/2/
I have added the following lines:
tr td:first-child
{
background-color: orange;
}
tr:nth-child(even) td:nth-last-child(2)
{
background-color: white;
}
tr:nth-child(odd) td:nth-last-child(2)
{
background-color: yellow;
}
The last selector is necessary when you change your rowspan to 3 or more.
I would however suggest using classes for your first column. It will be a lot easier a better when you want to use more columns in the future.
demo - http://jsfiddle.net/victor_007/sthmw0dk/3/
The only thing i have changed is styling td instead of tr with background-color
Using td:not(:first-child) the first-child of tr will not get any styling
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 5px;
}
table {
width: 100%;
}
th {
background-color: grey;
color: white;
}
.first-col {
background-color: orange;
}
tr:nth-child(odd) td:not(:first-child) {
background-color: yellow;
}
<table>
<colgroup>
<col class="first-col" />
</colgroup>
<tr>
<th> </th>
<th>Bank</th>
<th>Amount</th>
</tr>
<tr>
<td>John</td>
<td>ABC</td>
<td>12345</td>
</tr>
<tr>
<td rowspan="2">David</td>
<td>DEF</td>
<td>456789</td>
</tr>
<tr>
<td>GHI</td>
<td>147258</td>
</tr>
<tr>
<td>Kevin</td>
<td>JKL</td>
<td>258369</td>
</tr>
<tr>
<td>Mike</td>
<td>MNO</td>
<td>369258</td>
</tr>
</table>