Trying to build a table with sort icon next to each column name. (Using bootstrap and font awesome)
Please, refer to the code below
HTML
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
</tr>
</table>
CSS
th::after {
font-family: FontAwesome;
content: "\f0dc";
float: right;
text-align: right;
}
Why float and text-align not working here? Please let me know right CSS code to get it right. I also don't want that sort icon to wrapped up like normal text in smaller screens. It should be in fixed right place.
i think your mixing up the table tags
<table></table> table tag
<thead></thead> table header
<th></th> table column
<tbody></tbody> table body
<tr></tr> table row
<td></td> table cell
<tfoot></tfoot> table footer
but to answer your question with the way your current data is structured do it like this just add an empty table cell or column as the case maybe to your table row then use the css below to add what you want to the cell.
<!DOCTYPE html>
<html>
<head>
<title>extra table cell</title>
<style type="text/css">
tr th:last-child::after {
font-family: FontAwesome;
content: " i am what you want";
}
</style>
</head>
<body>
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
<th></th>
</tr>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
<th></th>
</tr>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
<th></th>
</tr>
</table>
</body>
</html>
Related
I have the following HTML table:
<div class="table">
<table id="carTable">
<tbody>
<tr>
<th>Car Number</th>
<th>owner</th>
</tr>
<!-- {{#each car}} -->
<tr>
<td>{{carNumber}}</td>
<td>{{owner}}</td>
</tr>
<!--{{/each}} -->
</tbody>
</table>
</div>
And associated CSS that changes colour of text in first column:
#carTable tr>:nth-child(1){
font-weight: bold;
color: #2d89ac;
}
The problem is that this is also changing the color on the table header of that column.
How can I stop it doing so?
You should put your column titles in a thead (table header) section.
Although there are exceptions, putting your column titles in the tbodyis not generally good practice. Having the column titles in a separate header section permits scrolling of the body of the table whilst keeping the column titles in view.
<table id="carTable">
<thead>
<tr>
<th>Car Number</th>
<th>owner</th>
</tr>
</thead>
<tbody>
<!-- {{#each car}} -->
<tr>
<td>{{carNumber}}</td>
<td>{{owner}}</td>
</tr>
<!--{{/each}} -->
</tbody>
</table>
Then you could add a tbody selector in your CSS rule.
#carTable tbody tr>:nth-child(1){
font-weight: bold;
color: #2d89ac;
}
You can use the :not() rule in css:
#carTable tr>:nth-child(1):not(th) {
font-weight: bold;
color: #2d89ac;
}
<div class="table">
<table id="carTable">
<tbody>
<tr>
<th>Car Number</th>
<th>owner</th>
</tr>
<!-- {{#each car}} -->
<tr>
<td>{{carNumber}}</td>
<td>{{owner}}</td>
</tr>
<!--{{/each}} -->
</tbody>
</table>
</div>
Here's a link to the question
and here's my answer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spreadsheet</title>
<style>
td {
text-align: right;
width: 33%;
}
td, th, table {
border: 1px solid;
border-collapse: collapse;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<caption>Purchase Orders</caption>
</thead>
<tbody>
<tr>
<th>Order Date</th>
<th>SKU</th>
<th>Quantity</th>
</tr>
<tr>
<td>07-16-2018</td>
<td>523402</td>
<td>54</td>
</tr>
</tbody>
</table>
</body>
</html>
It comes out fine on my IDE but on the website is saying 3 of 4 test cases fail.
The site seems to be a little more strict here than to just check if it looks the same. To make the tests pass you need to:
Put the row containing the <th> tags between <thead></thead>.
Move the caption out of <thead>.
The correct code for the table would then look like this:
<table>
<caption>Purchase Orders</caption>
<thead>
<tr>
<th>Order Date</th>
<th>SKU</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>07-16-2018</td>
<td>523402</td>
<td>54</td>
</tr>
</tbody>
</table>
I want to display image next to each row in a table using Html and CSS.
Something like this image:
Images will be placed at the red cross position: on right side of each row and not created within extra column.
What would be the best way to do that.
You could try using the :last-child combined with the :after pseudo.
tr td:last-child::after {
content: '';
display: inline-block;
position: absolute;
height: 1em;
width: 1em;
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat center;
}
<table>
<thead>
<th>1</th>
<th>2</th>
</thead>
<tb>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tb>
</table>
Another column with a blank table header should do it.
<table style="width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th> </th> -- This is the blank space
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>Image goes here</td>
</tr>
</table>
You can always style it up to appear like it is not apart of the table.
i have an html file that looks like this
<!DOCTYPE html>
<html>
<head>
<title>Postgraduate students</title>
</head>
<body align = "center">
<h2>Postgraduate Students</h2>
<br></br>
<table align = "center" border = "5" width = "50%">
<thead colspan = "4">
<tr>
<th>NAME</th>
<th>Registration No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>IDI Mohammed</td>
<td>SEP16/COMP/001X</td>
</tr>
<tr>
<td>LUBINGA Robert</td>
<td>SEP16/COMP/002U</td>
</tr>
</tbody>
</table>
</body>
How do i make the content in td start on the left border-line of the table ? Right now the table looks like this.
In order to make text-align in table you have to use tex-align css property
<body align="center">
<h2>Postgraduate Students</h2>
<table align="center" border="5" width="50%">
<thead colspan="4">
<tr>
<th>NAME</th>
<th>Registration No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>IDI Mohammed</td>
<td>SEP16/COMP/001X</td>
</tr>
<tr>
<td>LUBINGA Robert</td>
<td>SEP16/COMP/002U</td>
</tr>
</tbody>
</table>
Check this link : Jsfiddle
tbody>tr>td {
text-align: left
}
take that 'align = "center"' out and replace that with the '"left"'
In order to align the text to the left of your td, you can use the CSS property text-align and set the value to "left".
http://www.w3schools.com/cssref/pr_text_text-align.asp
<head>
<title>Postgraduate students</title>
<style type="text/css">
td{text-align:left;}
</style>
</head>
You can try to modify your head content like this for a quick test but i recommand to use a css file.
Firstly, remove the align attribute as this is obsolete & deprecated and should no longer be used.
MDN
Note: Do not use this attribute as it is obsolete (not supported) in the latest standard.
To achieve the same effect as the left, center, right, or justify values, use the CSS text-align property on it.
All tbody text will then align left by default.
To center the table, just use margin:auto.
table {
margin: auto;
}
<table border="5" width="60%">
<thead colspan="4">
<tr>
<th>NAME</th>
<th>Registration No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>IDI Mohammed</td>
<td>SEP16/COMP/001X</td>
</tr>
<tr>
<td>LUBINGA Robert</td>
<td>SEP16/COMP/002U</td>
</tr>
</tbody>
</table>
You have to add this to css style:
tbody>tr>td {
text-align: left
}
If i were you I would get rid of align: center.
I have used table for display the list of records. It have lot of rows and columns. If I print this table the table heading display in first page. After the first page the headings are not display. I found many website from Google search. I have followed that method, but I could not achieve. I could not realize the mistake. This is my css.
<style type="text/css" media="print" >
table td {
border-bottom:1px solid gray;
}
th {
font-family:Arial;
color:black;
background-color:lightgrey;
}
thead {
display:table-header-group;
}
tbody {
display:table-row-group;
}
</style>
This my Html code:
<table border="0" cellpadding="2" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>First Name 1</td>
<td>Last Name 1</td>
</tr>
</tbody>
</table>
Anyone can help me? Thanks.
Try adding this in your CSS :
#media print
{
thead {display: table-header-group;}
}
Here is the sample
First, you have to explicitly define the table head and table body:
<table>
<thead>
<tr>
<th>First Heading</th>
<th>Second Heading</th>
<th>Third Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
. . .
<tr>
<td>fim</td>
<td>fam</td>
<td>fom</td>
</tr>
</tbody>
</table>
If you want printing to work, you need to have an explicit declaration. Next, you just need a single line of CSS to get things going:
#media print {
thead {display: table-header-group;}
}
This will force most browsers to repeat the contents of thead node on every printed page.