I have a table that I set a fixed "name" column width of 200px.
When the text in any row wraps around to the next line (making a 2 line cell,) every other column is extended. For a reproducible code snippet, see below:
<!DOCTYPE html>
<html>
<head>
<style>
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
tr:nth-child(even) {
background-color: #ddddff;
}
</style>
</head>
<body>
<table style="position:fixed;background-color:white;top:0;left:100px;">
<tr>
<td width="200px;">
Park Name
</td>
<td>
Park Viewed
</td>
<td>
Book Now Button
</td>
<td>
Website Button
</td>
<td>
Call Button
</td>
<td>
Email Button
</td>
<td>
Book Now Call Button
</td>
</tr>
</table>
<table style="margin-left:100px;margin-top:20px">
<tr>
<td width="200px;">
Park Name
</td>
<td>
Park Viewed
</td>
<td>
Book Now Button
</td>
<td>
Website Button
</td>
<td>
Call Button
</td>
<td>
Email Button
</td>
<td>
Book Now Call Button
</td>
</tr>
<tr>
<td>
Camp Hatteras RV Resort and Campground
</td>
<td>
1
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
If you test it, shortening the park name (so that it doesn't wrap) will provide the intended behavior. The problem is that when the table gets extended, the fixed header (which is itself a table) is no longer the same size as the data table.
Edit: moved CSS into the code snippet so that it's not outside-sourced.
Put your header in the thead instead of a diff table
<table>
<thead>
<tr>
<th class="name">col1</th>
<th>col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>data col1</td>
<td>data col2</td>
</tr>
</tbody>
</table>
Then style the class
th.name {width: 200px}
That should take care of the width for both the header and the data
Related
I have a problem using Bootstrap tables in Angular:
My <td> tags does not fit the corresponding <th> from my tableheader: I am not sure, if it is caused due my calls to the template presenting the <td>:
Here is my code:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Students</th>
<th>Links</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of tests">
<app-preview-container id={{c.id}} name={{c.name}} description={{c.description}} studentCount={{Count[c.id]}}"></app-preview-container>
</tr>
</tbody>
</table>
And thats the component which gets called (<app-preview-container>):
<td>
{{name}}
</td>
<td>
{{description}}
</td>
<td>
{{count}}
</td>
<td>
some buttons
</td>
Does anyone has a tip how I can fix that? I have tried a lot using Bootstrap width-params like w-xx or col-md-x or col-x or using scope="col"/"row". But none of these fixed it.
Tables often look that way when you change <tr> / <td> display property. HTML tables have their own unique display properties display: table-row; and display: table-cell;.
You either have done that or wrapped your <td>s with additional div.
You can inspect your table in the console, and check if <td>s are direct children of <tr> and then set by hand <tr> and <td> display property to table-row and table-cell.
An example of a broken table:
td {
border: 1px solid gray;
}
*[style] {
outline: 2px dashed red;
}
<table>
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
<td>
Column 3
</td>
</tr>
<tr>
<tr style="display: block;">
<td>
Broken
</td>
<td>
Row
</td>
<td>
!
</td>
</tr>
<tr>
<td style="display: inline-block;">
Broken td
</td>
<td>
!
</td>
<td>
!
</td>
</tr>
<tr>
<td>
Correct
</td>
<td>
row
</td>
<td>
!
</td>
</tr>
</table>
I'm working with a html table that's generated dynamically and trying to place an icon/image in a column on the left side that spans the length of multiple table rows. In my example, I would like to place a single image in the colored shaded areas. This needs to be done using html & css. I'll be using the same icon in each block:
Here's a sample of the table structure:
<table border="0">
<tbody>
<tr>
<td>
{dynamic title}
</td>
</tr>
<tr>
<td>
{dynamic description}
</td>
</tr>
<tr>
<td>
{dynamic archives}
</td>
</tr>
</tbody>
</table>
Here's my icon div that needs to go in the shaded areas:
<div class="icon"><i class="far fa-newspaper"></i></div>
Obviously, this ain't gonna work:
<table border="0">
<tbody>
<div class="icon"><i class="far fa-newspaper"></i>
<tr>
<td>
{dynamic title}
</td>
</tr>
<tr>
<td>
{dynamic description}
</td>
</tr>
</div>
<tr>
<td>
{dynamic archives}
</td>
</tr>
</tbody>
</table>
td {
width: 100px;
background: green;
}
<table>
<tr>
<td rowspan=2>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
You could use rowspan from table to span multiple rows.
i have a table,like:
<html>
<head></head>
<body>
<table class=" top-10">
<thead>
<tr>
<th>index</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> john </td>
</tr>
<tr>
<td> 2 </td>
<td> mia </td>
</tr>
<tr>
<td> 3 </td>
<td> james </td>
</tr>
<tr>
<td> 4 </td>
<td> creed </td>
</tr>
<tr>
<td> 5 </td>
<td> perty </td>
</tr>
... and so on
</tbody>
</table>
</body>
</html>
This is a list
and I want the top three indexes to have different colors
It's kind of like a hot list
How do I write CSS3 styles to make this table look like this?
yes,The code for the first answer looks pretty neat, but there's one problem we seem to be missing.No matter how many pages there are, the first three have this effect.
How can index=1/2/3 have this effect?
You can use CSS nth-child:
https://css-tricks.com/useful-nth-child-recipies/
Example:
.top-10 tr:nth-child(1) td:first-child {
background-color: red;
}
.top-10 tr:nth-child(2) td:first-child {
background-color: orange;
}
.top-10 tr:nth-child(3) td:first-child {
background-color: yellow;
}
I'm trying to make a fairly simple table with a rowspan, and it works as expected. However, the problem is with cells appearing after the all the spanned cells are resolved; they are not positioned where I think they should be.
Here's my code:
<html>
<body>
<table width="100%" border="1">
<tr>
<td rowspan="7">
7 row
</td>
<td>
1 row
</td>
</tr>
<tr>
<td>
1 row
</td>
</tr>
<tr>
<td rowspan="5">
5 row
</td>
</tr>
<tr>
<td>
<i>This shouldn't be here, but below and aligned to the left side of the table</i>
</td>
<td>
<i>This shouldn't be here, but below and aligned at the right side of the table</i>
</td>
</tr>
</table>
</body>
</html>
Here's how it renders in Chrome and Firefox (I don't have the reputation to post inline images at Stack Overflow):
http://embernet.com/misc/rowspan.gif
Those two wordy cells really should be in the columns 1 and 2 that were already established, not as new columns 3 and 4.
The problem seems to come from me spanning rows that are never individually realized. Keep in mind this is part of a larger, dynamically generated table that in some cases will show each of the 7 rows. I know someone will inevitably ask why I need to do this.
I don't see anything in the specs that suggests I cannot rowspan like this, so I'm hoping I'm just missing something obvious.
A JSFiddle is here: https://jsfiddle.net/mLard575/
I am not sure what you are expecting. I give two possibilities as per my understanding.
Choose as per your requirements
First Method:
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 1px solid black;
text-align: center;
}
<body>
<table>
<tbody>
<tr>
<td rowspan="7">7</td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td rowspan="5"> 5 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
</tr>
</tbody>
</table>
</body>
Second Method:
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 1px solid black;
text-align: center;
}
<body>
<table>
<tbody>
<tr>
<td rowspan="7">7</td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
</tr>
</tbody>
</table>
</body>
If these two methods are not suited for you. Just explain little bit more with diagram example to update the code.
Currently I'm using a <table> something like below
<table width="45%" bgcolor="#fff" border="0" style="float: left; margin:2px;">
<tr>
<td><img src="img/default.jpg" style="width:170; height:auto;"></td>
</tr>
</table>
The problem is: how do I make it always on top like this picture without space like my first picture
Here the example table of what I want:
You can just use two divs beneath each other and add for each cell other divs inside of the two main divs.
You can use the "div" tag and that will divide your table to any shape that you want and you will make it like that:-
<div style="width:100px; height:auto; clear:both">
your input here.
</div>
that is for example then put your divide with the same format above but change the style and let the clear attribute like that,This will Separate your divide and will not attach it to any other divide.
I hope that will work. :)
For placing table at the top use margin in css file set it 0 .
**margin: 0px;**
See this example
<link rel="stylesheet" type="text/css" href="css/style.css">
<table border="1" class="myfirsttabel">
<thead>
<th>Name</th>
<th>Email</th>
<th>Mobileno</th>
</thead>
<tbody>
<tr>
<td> My Name is Varun</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td>
<table border="1" class="tabel">
<thead></thead>
<th>Name</th>
<th>Email</th>
<th>Mobileno</th>
<tbody>
<tr>
<td> My Name is Varun</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td>
</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td> My Name is Varun</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td> My Name is Varun</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td> new table</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td> My Name is Varun</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
</tbody>
</table>
</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td> My Name is Varun</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td> My Name is Varun</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
</tbody>
</table>
and css file