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">
Related
I am making a table using bootstrap 3.3.7, in this I am using Fixed header for that I am giving Position:static, but it is not working in IE, please suggest any alternate way.
here is my working…
.tableStyle {
overflow-y: auto;
height: 400px;
border: 1px solid #ccc;
}
.tableStyle thead th {
position: sticky;
top: 0;
}
.tableStyle thead th {
background: #f1f1f1;
color: #333;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Simple Sidebar - Start Bootstrap Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/simple-sidebar.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
<div class="table-responsive tableStyle">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>2</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>3</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/sidebar_menu.js"></script>
</body>
</html>
please tell any alternate way how I can handle it in IE browser.
.tableStyle thead th {
position: sticky;
top: 0;
}
instead of the position:sticky you just use position: fixed. it will work in chrome, Mozilla not works in IE-7. i'm just correcting your code here.
I am having trouble getting my table to recreate this photo. Not worried about the colors and I will delete the names in the cells just needed them for reference.
border is white but I am using black on mine
Here is what I am getting. I am not sure where I am going wrong. I've tried to get this for the past five hours and am running out of ideas. How can I get this to look like the picture above?
My table
Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Tables</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td rowspan="2" colspan="2">1</td>
<td rowspan="2" colspan="5">2</td>
</tr>
<tr></tr>
<tr>
<td rowspan="2" colspan="2">3</td>
<td rowspan="2" colspan="4">4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
</tbody>
</table>
</body>
</html>
My CSS
body{
font-family: monospace;
background-color: #ddd;
}
table{
width: 655px;
height: 381px;
border: 35px solid #000;
border-collapse: collapse;
}
td{
border: 20px solid #000;
padding: 10px;
}
I know I have an empty tag in there but when I take it out the table looks even worse.
UPDATE
I was able to get it looking pretty close setting the width and height of my cells
Updated table
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,
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"
Apparently, Google’s Dosis font screws up table layout:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Dosis" />
<style type="text/css">
table {
width: 100%;
}
td {
outline: 1px solid red;
}
#test {
font-family: "Dosis";
}
</style>
</head>
<body>
<table id="test">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
<table id="control">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
In the above setting cells in the table on which Dosis is set have uneven spacing, while those in the one without a font family set are as expected.
What is suprising is that the incorrect behaviour is perfectly consistent across Firefox, Chrome and Opera.
Can anyone please explain this, and possibly give a solution?
I think it is because the width of 1,2,3,4,5 are not the same, why do I think this? Try by using the same text:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Dosis" />
<style type="text/css">
table {
width: 100%;
}
td {
outline: 2px solid red;
}
#test {
font-family: 'Dosis';
}
</style>
</head>
<body>
<table id="test">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<table id="control">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
You can use css to make the width of td tag fixed. Or javascript to make make the width dynamically allocated.