I have a large table, that when scrolling the header and first columns in rows are static and should not move. I would like to solve this with only the CSS. The problem is, that the tables cells are dynamic, so you don’t know what will the width/height be.
<table>
<thead>
<tr>
<th>First</th>
<th>Second</th>
…
</tr>
</thead>
<tbody>
<tr>
<td class=”static”>First</td>
<td class=”static”>Second</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
…
</tr>
….
</tbody>
</table>
Related
I am trying to create this type of table or design in HTML/CSS/PHP.
In each block, there will be 3 variables. One with horizontal orientation in center and two with vertical orientation in either direction of a center variable.
I have tried to replicate this by using HTML tables but not getting proper results. This is what I have managed to get.
I already did the programming to configure variables and putting them where they should be with orientation but kind of stuck at proper UI. Kindly help me to design this.
Adding in HTML :
<table style="width:400px">
<tr>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
</tr>
</table>
Adding in css:
th, td {
padding: 15px;
}
Solve It :)
Good luck !!!
I have data like this:
<table>
<tr>
<th>Item_Code</th>
<th>Size</th>
<th>Count</th>
</tr>
<tr>
<td>1001</td>
<td>XL</td>
<td>10</td>
</tr>
<tr>
<td>1001</td>
<td>XXL</td>
<td>5</td>
</tr>
<tr>
<td>1002</td>
<td>3XL</td>
<td>3</td>
</tr>
<tr>
<td>1002</td>
<td>XL</td>
<td>10</td>
</tr>
</table
I want result as below
<table>
<tr>
<th>Item_Code</th>
<th>Size</th>
<th>Count</th>
</tr>
<tr>
<td>1001</td>
<td>XL,XXL</td>
<td>15</td>
</tr>
<tr>
<td>1002</td>
<td>3XL,XL</td>
<td>13</td>
</tr>
</table>
I want this thing in SQL Server. Can anyone please help me with this?
I know the query to concatenate the multiple row values into a single column, but I don't know along with other columns also.
enter code hereFairly new to this and doing my first HTML project. In it I have to create a table, which I have managed to do fine. However, it isn't exactly the same. Here's what I have:
<table>
<tr>
<td>1</td>
<td>Thunder Road</td>
<td>4:47</td>
</tr>
<tr>
<td>2</td>
<td>10th Avenue Freeze Out</td>
<td>3:10</td>
</tr>
<tr>
<td>3</td>
<td>Night</td>
<td>3:00</td>
</tr>
<tr>
<td>4</td>
<td>Backstreet</td>
<td>6:29</td>
</tr>
<tr>
<td>5</td>
<td>Born To Run</td>
<td>4:29</td>
</tr>
<tr>
<td>6</td>
<td>She's The One</td>
<td>4:29</td>
</tr>
<tr>
<td>7</td>
<td>Meeting Across The River</td>
<td>3:15</td>
</tr>
<tr>
<td>8</td>
<td>Jungleland</td>
<td>9:33</td>
</tr>
</table>
It is supposed to look like this
How do I get the track listing numbers to sit so tightly in that cell? I've tried colspan and rowspan and can't get it to sit that comfortably.
Also, I have not inlcluded the table headers in my HTML above but I do have it. There are 2 table headers, yet 3 columns underneath the header. How do I get it all to sit together nicely as in the picture I linked, and not like mine?
Thanks!
Ok I see. You need the HTML as it is bellow:
<table border="1">
<tr>
<td colspan="2">Bruce Springsteen<br>Born To Run</td>
<td><img src="https://upload.wikimedia.org/wikipedia/en/7/7a/Born_to_Run_(Front_Cover).jpg"></td>
</tr>
<tr>
<td>1</td>
<td>Thunder Road</td>
<td>4:47</td>
</tr>
<tr>
<td>2</td>
<td>10th Avenue Freeze Out</td>
<td>3:10</td>
</tr>
<tr>
<td>3</td>
<td>Night</td>
<td>3:00</td>
</tr>
<tr>
<td>4</td>
<td>Backstreet</td>
<td>6:29</td>
</tr>
<tr>
<td>5</td>
<td>Born To Run</td>
<td>4:29</td>
</tr>
<tr>
<td>6</td>
<td>She's The One</td>
<td>4:29</td>
</tr>
<tr>
<td>7</td>
<td>Meeting Across The River</td>
<td>3:15</td>
</tr>
<tr>
<td>8</td>
<td>Jungleland</td>
<td>9:33</td>
</tr>
</table>
You can also test it on this JSFiddle.
The key was to add colspan="2" on the <td> that writes "Bruce Springsteen...", which means that this cell will take the place of 2 columns.
Hope this helped you. If it helped you you can accept and upvote my answer. Thanks !
I'm working on this assignment and pretty much everything works fine, but I can't understand why the top cell does not occupy the entire space.
Also, it'd be really useful to know if I can format cells (size and such).
Here's the code.
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th colspan="4">Notas de HTML</th>
<tr>
<td colspan="2">Alumno</td>
<td colspan="2">Conceptos (60%)</td>
<td colspan="3">Procedimiento (30%)</td>
<td rowspan="2">Actitud (10%)</td>
</tr>
<tr>
<td>Apellidos</td>
<td>Nombre</td>
<td>Examen teórico</td>
<td>Examen práctico</td>
<td>Práctica 1</td>
<td>Práctica 2</td>
<td>Práctica 3</td>
</tr>
<tr>
<td>ape1</td>
<td>nom1</td>
<td>7</td>
<td>6.5</td>
<td>8</td>
<td>4</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>ape2</td>
<td>nom2</td>
<td>5</td>
<td>4</td>
<td>6</td>
<td>4</td>
<td>5</td>
<td>7</td>
</tr>
</tr>
</table>
</body>
To span all eight columns you need to use this:
<th colspan="8">Notas de HTML</th>
jsFiddle example
And by using CSS you can format cells however you like.
I want to achieve this table structure
a | b | c
1 | 1 | 1
2 | 2 | 2
3 | 3 | 3
| | 4
I have this code but it puts the 4 in another column instead of underneath the 3
<table border="0">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
You will have to make some empty cells, the row with the '4' in it, is a new row:
<table border="0">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td>4</td>
</tr>
</table>
<table border="0">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>4</td>
</tr>
</table>
This is normal : in your table header, you defined three different headers, thus three different columns. Since <td></td> defines a column in a table, your '4' gets its own column which is not defined by the column headers of the table.
In order to let the 4 go underneath the 3, you should make a new table row with the last containing 4, like this :
<table border="0">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td>4</td>
</tr>
</table>
As analternative to the toher answers that add a new row, if you want the 4 to be in the same table cell as the 3, just add a line break inside the table cell
...
<tr>
<td>1</td>
<td>2</td>
<td>3<br/>4</td>
</tr>
</table>
or use div tags in the cell like this
...
<tr>
<td>1</td>
<td>2</td>
<td>
<div>3</div>
<div>4</div>
</td>
</tr>
</table>