I am taking an online course and learning javascript, html5 and CSS. I am having an issue with getting my table to be formatted with my css file. It is inside a DIV tag:
<div data-role="main" class="ui-content">
I am trying to do with my CSS:
table th, td { border: 1px solid black;}
And I tried doing .ui-content table th, td {} and nothing and I tried a few others, but I am still stuck with it. Any help would be greatly appreciated. Thanks
When have space between element you are targeting children of that element while when you have commas you are targeting multiple elements.
In your case to be able to apply a border to the th, td and table you would need to do:
table, th, td { border: 1px solid black;}
But if you want to apply the css to the th and td inside of a table element you would need to do
table td { border: 1px solid black;}
table th { border: 1px solid black;}
With the html you have
<div data-role="main" class="ui-content">
<table>
<tr>
<th>Grade</th>
<th>Numeric Equivalent</th>
<th>Explanation</th>
</tr>
<tr>
<td>A</td>
<td>95-100</td>
<td><strong>Excellent.</strong></td>
</tr>
</table>
</div>
Your css should be
table { border-collapse: collapse; }
table th { border: 1px solid black; }
table td { border: 1px solid black; }
Here's vary basic sample, now may be tell what's the problem
table, th, td { border: 1px solid black;}
<table>
<tr>
<th>
Header 1
</th>
<th>
Header 2
</th>
</tr>
<tr>
<td>
Data 1
</td>
<td>
Data 2
</td>
</tr>
<tr>
<td>
Data 1
</td>
<td>
Data 2
</td>
</tr>
</table>
Related
I have a table inside another table. My HTML code is like below.
<td>
<table>
<tbody>
<tr>
<td class="remind_when"><label>sfd</label></td>
<td class="remind_when"><label>sdfasdf</label></td>
<td class="remind_when"><label>sadfasf</label></td>
</tr>
</tbody>
</table>
</td>
My CSS code is like below
.remind_when{
border-radius: 5px;
border: 2px solid #ced4da !important;
display: inline-block;
}
table, th, td {
border-collapse: collapse;
}
I am getting output like below
Only elements that display as table-* will collapse their borders. You have made the td elements display: inline-block so they won't.
So don't do that.
I want to add border to my specific table's td and th so i did like :
table.borderedtable td, th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
problem is the inside table also gets the border I want the border to be added only to td and th under the table with class. So i tried using direct child select > like below:
table.borderedtable>tr>td,>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Now I dont get any border
The browser automatically inserts a <tbody> element inside tables, so the tbody is the direct descendent of your table, not tr.
For instance, to select the first td inside a table you would do this:
table.borderedtable>tbody>tr>td {
border: 1px solid black;
}
table.borderedtable>tbody>tr>td, table.borderedtable>thead>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
Excuse my CSS ignorance here.
I'm trying to apply a background color to a row using the following css:
tbody tr:hover {
background-color: #F69;
border: thin solid black;
}
The HTML table has some inherent column colors like shown below. The CSS above will not change the color to #F69 and keep the colors #993300. Is there a way to override this HTML cell coloring?
tbody tr:hover {
background-color: #F69;
border: thin solid black;
}
<table>
<tr>
<th>11 lbs</th>
<td></td>
<td bgcolor="#993300">1</td>
<td bgcolor="#993300">2</td>
<td bgcolor="#993300">3</td>
<td> </td>
</tr>
</table>
I think you are want something like this-
tr td:hover {
background-color: #F69;
border: thin solid black;
}
<table width="100%">
<tr>
<th colspan="5">11 lbs</th>
</tr>
<tr>
<td width="20%"> </td>
<td width="20%" bgcolor="#993300"></td>
<td width="20%" bgcolor="#993300"></td>
<td width="20%" bgcolor="#993300"></td>
<td width="20%"> </td>
</tr>
</table>
I hope it will helps you.
I'm trying to apply a background color to a row using the...
If I read your question correctly, and considering that you have both th and td elements in your table, it seems like you are trying to change the background-color of the row's child elements at the same time when hovering over the row.
If that's the case, then this is your solution:
tr:hover td,
tr:hover th {
background-color: #F69;
border: thin solid black;
}
All of the row cells will be highlighted on hover.
Otherwise, if you are trying to change the background-color one cell at a time, I recommend Maddy's answer.
Try it Online!
I am making a form in html, and I am using a table for layout of my input controls and labels.
For each input of a form, there is one label associated with it.
I want a border to appear around each pair of adjacent cell that is a label and its associated input tag.
I tried making a div around the two adjacent <td> tags but it says "invalid tag" as only <td> are allowed inside a <tr> tag.
Is there anyway to do it either in CSS or anything else ?
My HTML sample code :
<table>
<tr>
<td>Date</td>
<td><input type="text"></td>
<td>Name</td>
<td><input type="text"></td>
</tr>
</table>
Below is a screenshot of what I want to achieve.
You've not collapsed your table border, try this
Demo
table {
border-collapse: collapse;
}
table, td {
border: 1px solid #c00000;
}
If you could apply classes to your td's you could try this:
<table cellspacing="0">
<tr>
<td class="label">Label1: </td>
<td>input1</td>
<td class="label">Label2: </td>
<td>input2</td>
</tr>
</table>
With the following css:
table {
background-color: silver;
border-collapse: collapse;
}
td {
padding: 5px;
border: 1px solid red;
border-width: 1px 1px 1px 0px;
}
td.label {
border-width: 1px 0px 1px 1px;
}
http://jsfiddle.net/H3p8e/2/
Try to apply border-collapse:collapse; rule.
In another post I read that if I need to add borders to every row except the header row I should use THEAD & TBODY. So I have added it to the page, but I cannot find how to apply it to the TBODY. I am a newbie so bear with me. I can put borders around the entire table, but need to exclude the header row. Here is a copy of a table with the border attributes in the TABLE tag where it works fine.
<table width="300" BORDER=1 CELLPADDING=3 CELLSPACING=1 RULES=ROWS FRAME=BOX>
<thead>
<tr>
<th width="60" align="center" valign="top" scope="col">Type</th>
<th width="200" align="left" valign="top" scope="col">Address</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" valign="top">Shipping</td>
<td align="left" valign="top">123 Main St</td>
</tr>
</tbody>
</table>
Any help is appreciated.
You should use CSS for presentation/styling:
tbody {
border: 1px solid #ccc;
}
JS Fiddle demo.
I'm not sure how new you are, but for completeness:
<head>
<!-- other stuff -->
<style type="text/css">
tbody {
border: 1px solid #ccc;
}
</style>
<!-- other stuff -->
</head>
You could also use inline styles in the element's opening tag, for example:
<tbody style="border: 1px solid #ccc;">
Preferably, though, you'd link to an external stylesheet, this goes into the head of the document:
<link href="path/to/stylesheet.css" rel="stylesheet" type="text/css" />
Or, if you're targeting those browsers that don't offer the option to style the tbody with a border, you can target specific cells within the tbody using the following:
table {
margin: 0;
border-spacing: 0;
}
tbody tr td:first-child {
border-left: 2px solid #000;
}
tbody tr td:last-child {
border-right: 2px solid #000;
}
tbody tr:first-child td {
border-top: 2px solid #000;
}
tbody tr:last-child td {
border-bottom: 2px solid #000;
}
JS Fiddle demo.
This does, of course, require a browser that understands and implements the :last-child and :first-child pseudo-classes.