CSS Immediate Child Selector Not Selecting [duplicate] - html

This question already has answers here:
Why doesn't table > tr > td work when using the child selector?
(2 answers)
Closed 4 years ago.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
table > tr > th {
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<th>a</th>
<th>b</th>
</tr>
</table>
</body>
</html>
I just can't see why the text in the cells are not red. Could you show me what i am missing.

Try table tr th instead of table > tr > th because a tbody element is added as a parent element to tr by the browser and since the direct child selector > is used, it won't style the th
table tr th {
color: red;
}
<table>
<tr>
<th>a</th>
<th>b</th>
</tr>
</table>

What you have are table headers. Firstly, if you want a table cell, use the <td> tag. You do not have to use table > tr > td. If you want to color specific cells, use a class to identify them:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
.cells {
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td class="cells">a</td>
<td class="cells">b</td>
</tr>
</table>
</body>
</html>
If not, just use the tag:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
td {
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
</body>
</html>
I hope this is what you wanted.

Related

Using external .css for html styling

I have an issue that I cannot link my external style.css to my index.html file. Both files are in exact same directory.
My style.css :
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
And I am trying to link it in my html as following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
Full html script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<br>
<table id="t1">
<caption>Operation table</caption>
<thead>
<tr>
<th>Operation code</th>
<th>To Do</th>
<th>Done</th>
<th>Left</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>1000</td>
<td>50</td>
<td>
</td>
</tr>
<tr>
<td>def</td>
<td>555</td>
<td>50</td>
<td id ="number1">
</td>
</tr>
</tbody>
</table>
<p id="demo"></p>
</html>
All the examples that I have looked up online use exact same method.
I have connected to the webserver and turned on developer mode to see if I can see anything. I have managed to spot an error:
Refused to apply style from '192.168.10.173:8080/style.css' because its MIME type ('text/html') is not supported stylesheet MIME type, and strict MIME checking is enabled
Still looking into why it could be caused
CSS files shouldn't have style tags. Simply remove them and it'll work.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
When you want to declare styles inside of an HTML file, then you have to put the CSS between style tags.

JavaScript date picker in HTML table

I have built a Prediction table which will contain football data. Please I need a JavaScript date picker code that will fit into this table I built.
table,
th,
td {
border: 0px solid black;
border-collapse: collapse;
}
table {
width: px;
}
th {
color: white;
background-color: black;
}
th,
td {
font-size: 25pt;
font-family: Arial;
text-align: center;
}
td {
background-color
<table>
<tr>
<th colspan="2"><b>England ยป Premier</b></th>
<th><b>Prediction</b></th>
</tr>
<tr>
<td> 24-06:20:16</td>
<td>Red Bull Bragantino <b style="color:red"> 2 : 1 </b> Ponte Preta</td>
<td style="background-color:none;color:none;"><b>Home Win</b></td>
</tr>
</table>
I will be grateful if someone could help me out.
I advice to actually try and look for solutions.
Below is the solution to your question where the website i gave actually thought you step by step to create a datepicker.
First of all you will need jquery to be able to use datepicker. There is few ways for you to get jquery datepicker CSS & JS file. For me, i prefer using CDN as it is much conveniet. Usually JS scripts are recommended to be placed before the body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<table>
<tr>
<th><b>Datepicker</b></th>
</tr>
<tr>
<td>Date:</td>
<td><input type="text" id="datepicker"></td>
</tr>
</table>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</body>
</html>

I have a table and why my center cell is longer than others

I am working on a project in which I have to make a webpage. I have a table and when I run the code, the center cell is longer than the other cells.
table,td,tr{border: 1px solid red; }
<!document html>
<html>
<body>
<head>
<title>calculatoer</title>
<meta charset="utf-8">
</head>
<div>
<table>
<tr><th>ali</th><th>mohammad</th></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
</table>
</div>
</body>
</html>
You can add the following code to the existing code:
<table style="table-layout: fixed ;width: 100% ;">
<td style="width: 25% ;">
In addition to ensuring the header matches the number of columns via colspan you can fix the width by a percentage or a specific size using the td CSS class.
table,td,tr{border: 1px solid red; }
td
{
width: 100px;
}
<!document html>
<html>
<body>
<head>
<title>calculatoer</title>
<meta charset="utf-8">
</head>
<div>
<table>
<tr><th colspan="3">ali mohammad</th></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
</table>
</div>
</body>
</html>

What use for nesting elements in a table

I have a html page which looks like this:
<html>
<head>
<body>
<table>
<thead>
<tr>...</tr>
<tr>...</tr>
</thead>
<tbody>
<tr>...</tr>
<tr>...</tr>
<div>
<tr>...</tr>
<tr>...</tr>
</div>
</tbody>
</table>
</body>
</head>
</html>
Why the tr inside the div arent' showed? and in the page element i see the div outside the table? I thought I could put a div in a table if it was inside a tr..
Why the tr inside the div arent' showed?
It doesn't fit in HTML's model of a table.
Look at thead / tfoot / tbody instead.
and in the page element i see the div outside the table?
The browser is trying to recover from your error
I thought I could put a div in a table if it was inside a tr..
You thought wrong. You can only put a div in a table if it is inside a td or a th.
You need something like this.
<!DOCTYPE html> <!-- Add a DTD -->
<html>
<head>
<!-- Meta tags, styles, javascripts comes here -->
<title>This is the title</title>
<meta charset="UTF-8" />
</head>
<!-- Close head before body -->
<body>
<table>
<thead>
<tr>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td><!-- Use td(s) in tr -->
<div></div> <!-- use div inside the td -->
</td>
</tr>
</tbody>
</table>
</body>
</html>

Vertical Alignment of inner elements

I've two elements in <td> a <div> and some text. I would like to align <div> to top and text to middle of <td> How can I do that?
Edit: The should be vertically top aligned and not text inside div.
try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
body { font:normal 62.5% tahoma }
.my-table { height:300px }
.my-cell { position:relative; border:1px solid green }
.my-div { position:absolute; top:0; left:0; border:1px solid red }
</style>
</head>
<body>
<table class="my-table">
<tr>
<td class="my-cell" align="center">
<div class="my-div">
I'm aligned to the top
</div>
This text is vertically centered.
</td>
</tr>
</table>
</body>
</html>
Like this?
<html>
<body>
<table width="100%" height="100%" border="1">
<tr>
<td><div style="text-align: center;">some text</div></td>
</tr>
</table>
</body>
</html>
...Or
<html>
<body>
<table width="100%" height="100%" border="1">
<tr>
<td align="center"><div style="text-align: left;">div text</div>some text</td>
</tr>
</table>
</body>
</html>
Remember to set the body height so you can see the vertical centering
by default any text in a table is vertical alligned, not sure why you need a div there. Its very difficult to get content to allign vertically inside a div