Is it possible to hide the string Last Name inside a th by using CSS?
It is important that table's background color, font size etc will not be affected.
<html lang="en">
<head>
<title></title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<table>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</table>
</body>
</html>
<style>
.hideMe {display:none;}
</style>
add this class on "th" and "td" like
<th class="hideMe">Last Name</th>
<td class="hideMe">Otto</td>
Hope this will help you.
You can realize that by giving the element an ID or a class and adding styles like
display: none;
for this ID/ this class in your css file.
You can try this:
.hidden-text {
text-indent: -9999px;
}
You can hide by using CSS pseudo selector.
th:nth-child(3) {
display: none;
}
Using nth element you can do it.
th:nth-child(3) {
display:none;
}
<html lang="en">
<head>
<title></title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<table>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</table>
</body>
</html>
Refer this link.
You could make the text the same colour as the background although this would still mean the text was there and selectable, it would preserve all other aspects of the layout. Or you could put the text in a span and make that visibility hidden.
Also you can use visibility property.
th:nth-child(3) {
visibility:hidden;
}
You can change the color of your text if don't want to affect table (use rgba properties).
.lastName{
color:rgba(0,0,0,0); /*Set opacity to 0*/
}
If you use display property, you will hide all <th></th> (and not just the text).
Good luck,
Related
I have a bootstrap table with overflow scroll (.table-responsive). Its working fine but i want to remove scroller from bottom. how can i remove it?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered" style="width:1500px;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
</script>
</body>
</html>
Is it because your table is wider than it's container. Either you remove the inline style with 1500px or give overflow-x: hidden; to the container which will disable the horizontal scrolling, but your table's width will be the same and a big part of it will be invisible
If you want to keep the horizontal scrolling, but want to hide the scrollbar, then you should try this:
div::-webkit-scrollbar{
display: none;
}
NOTE: it works only in webkit based browsers
I'm making a quick webpage with the following HTML code
<!DOCTYPE html>
<html>
<head>
<title>Summer CTF</title>
<link ref="stylesheet" type="text/css" href="ctf.css">
</head>
<body>
<h1>Harris Summer 2017 CTF</h1>
<table>
<tr>
<td>Name</td>
<td>Points</td>
<td>Flags Acquired</td>
</tr>
<tr>
<td>John Doe</td>
<td>2.5</td>
<td>#1, #6</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>2</td>
<td>#2, #3</td>
</tr>
</table>
</body>
</html>
However the css, which is properly saved in the same directory as the html, is not getting linked to the html. I used style tags just to see if css won't show up in my browser but that worked. These are all locally stored.
EDIT: ctf.css contains the following code
* {
color: blue;
}
h1 {
font-family: 'Raleway', sans-serif;
color: red;
}
table, tr, td {
border: 1px black solid;
}
You should change
<link ref="stylesheet" type="text/css" href="ctf.css">
to
<link rel="stylesheet" type="text/css" href="ctf.css">
I want to have a little not standard table. This is how it should look:
This is my demo. As you can see there, width of the first column is increased by text, but I don't want this behaviour. I want text to go from left to right in full row.
UPDATE:
For those who want to close question. Read below please.
I can't use additional tr and td with colspan for note. I use angular2 and datatables.net for tables and it will break selection and getting selected data.
use colspan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td colspan="3"><div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
since you don't want to use extra tr you may can use this method using css
.tr-holder>td {
padding-bottom: 35px !important;
}
.full-width {
position: absolute;
left: 0;
width: 100%;
padding: 0 9px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="tr-holder"> <!-- class added -->
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div class="full-width"> <!-- class added -->
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
You could also add an inline CSS
<td style="max-width:50px;">Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
specify the width of your table.
add this css properties to your style sheet.it will work fine
table
{
table-layout: fixed;
width: 100px;
}
I'm added the snippet below.
table
{
table-layout: fixed;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
or you can apply style to your td div,as
td div { width: 100px; overflow: hidden; }
td div { width: 100px; overflow: hidden; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
You could use something like bootstrap or foundations to simulate a table structure
i have table with three cols that uses bootstrap class "table table-striped". But i want first columns to be 100px in length second 400px and 3rd 200px. How do i do this with bootstrapped tables?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th style="width:100px !important;">Firstname</th>
<th style="width:400px !important;">Lastname</th>
<th style="width:200px !important;">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
you could give it another class like so "table table-width-100 table-striped"
and give the table-width-100 class the new width like so:
.table-width-100 { width: 100px; !important }
where !important overrides the default bootstrap css, but there might be a cleaner solution.
You can simply set width attribute to table headers for example <th style="width: 500px">
The way I would approach this is as follows:
Add a custom class to the <table>, so <table class="table table-striped custom"> for example. This ensures you don't overwrite BootStrap's native styling.
Use the nth-child selector to programmatically select the 1st, 2nd and 3rd <td>'s in all rows, thus eliminating the need to add a different style to each <td>:
https://jsfiddle.net/gcxfxyx3/
The CSS for this particular case is:
.custom td:nth-child(2) {
width: 100px;
}
.custom td:nth-child(3) {
width: 400px;
}
.custom td:nth-child(4) {
width: 200px;
}
Code :
<html>
<head>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr>
<td >Old</td>
<td>1</td>
</tr>
<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>
Is there any technique I can use to highlight the items that have changed ( in this case , 2nd row's 1st column) using CSS ? or do I have to resort to other things like JavaScript ?
Use classes like:
<html>
<head>
<style type="text/css">
.highlight{
background: fuchsia;
}
</style>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr class="highlight">
<td >Old</td>
<td>1</td>
</tr>
<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>
And if something changes you can add the class to the specific element:
$(element).addClass('highlight');
or with plain JavaScript:
element.class = 'highlight';
If you're asking how to highlight the second column of the second row specifically this will work:
table > tr:nth-child(2) > td:nth-child(2) {
background-color:#FFEEEE;
}
If you're asking how to highlight changed rows ANYWHERE, use a class.
Add this to the of your document or the stylesheet.
<style> .highlight { background-color:#FFEEEE; }
Add this to your TD's
class="highlight"