I have this table, I try to wrap the green span elements (a,b,c,d,e,f) so that all columns have the same width and put the extra spans in extra lines of the same cell increasing the height. As it is now, the first column takes its width from the spans and all are in one line. I tried changing the display and word-wrap options but did nothing.
body {
background-color: #444;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
font-size: 30px;
height: 40px;
text-align: center;
}
td {
width: 100px;
}
.goods td:nth-child(1){
color:green;
}
.goods span{
border: 1px solid green;
border-radius:15px;
padding-right: 5px;
width:13px;
cursor:pointer;
}
<table id="main">
<tr>
<td>K</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>*</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>*</td>
</tr>
<tr class="goods">
<td><span id="good1">a</span><span id="good2">b</span><span id="good3">c</span><span id="good4">d</span><span id="good5">e</span><span id="good6">f</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><span id="ship">+</span></td>
</tr>
</table>
span is inline element by default so you have to change display property to inline-block for example.
body {
background-color: #444;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
font-size: 30px;
height: 40px;
text-align: center;
}
td {
width: 100px;
}
.goods td:nth-child(1){
color:green;
}
.goods span{
border: 1px solid green;
border-radius:15px;
padding-right: 5px;
width:13px;
cursor:pointer;
display: inline-block;
}
<table id="main">
<tr>
<td>K</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>*</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>*</td>
</tr>
<tr class="goods">
<td><span id="good1">a</span><span id="good2">b</span><span id="good3">c</span><span id="good4">d</span><span id="good5">e</span><span id="good6">f</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><span id="ship">+</span></td>
</tr>
</table>
Just add display: inline-block; in span CSS
body {
background-color: #444;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
font-size: 30px;
height: 40px;
text-align: center;
}
td {
width: 100px;
}
.goods td:nth-child(1){
color:green;
}
.goods span{
border: 1px solid green;
border-radius:15px;
padding-right: 5px;
width:13px;
cursor:pointer;
display: inline-block;
}
<table id="main">
<tr>
<td>K</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>*</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>*</td>
</tr>
<tr class="goods">
<td><span id="good1">a</span><span id="good2">b</span><span id="good3">c</span><span id="good4">d</span><span id="good5">e</span><span id="good6">f</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><span id="ship">+</span></td>
</tr>
</table>
Related
I am struggling to make a html table that copies the layout of the table above.
I am just wondering what techniques to use and to recreate that table
I have tried nested tables and have looked into using div instead to create this but am still having issues, mainly with the way that the lines are presented in this and are not in an obvious layout
Here is a cool tool:
https://tabletag.net/
Here you need to nest a table in the second row
table,
td,
th {
border: 1px solid #595959;
border-collapse: collapse;
}
td,
th {
padding: 3px;
width: 30px;
height: 25px;
}
th {
background: #f0e6cc;
}
.even {
background: #fbf8f0;
}
.odd {
background: #fefcf9;
}
<table>
<tbody>
<tr>
<td colspan="3"></td>
<td colspan="5"></td>
<td colspan="3" rowspan="2"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="6"></td>
<td colspan="5"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I have tried this:
<table class="travaux">
<tr>
<th>Nature de l’opération</th>
<th>Unité</th>
<th>Quantité</th>
<th>P.U (dh)</th>
<th>Coût (dh)</th>
<th>N.J.T</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">Coût total : </td>
</tr>
<tr>
<td colspan="3">TVA (20%) : </td>
</tr>
<tr>
<td colspan="3">T.T.C : </td>
</tr>
</table>
.techniques{
width: 70%;
}
.techniques,.techniques th, .techniques td{
border: 1px solid;
border-collapse: collapse;
}
.techniques td{
border-top: hidden;
text-align: center;
padding: 6px;
}
to get this:
but I only get it like this:
please Could anyone tell me how I can get total section on the right instead of left?
<tr>
<td colspan="3" style="border-left: none;border-bottom: none;"></td>
<td colspan="3">Coût total : </td>
</tr>
that should do it. You can't just use 3 cols, when you got a 6 col layout
I want to have a table like you see in the picture.
But I am really unsuccessful in this.
here is my code:
table,
td,
th {
border: 1px solid black;
}
table {
width: 100%;
border-collapse: collapse;
}
<table>
<tr>
<td>SOL</td>
<td>K</td>
<td>Y</td>
<td>M</td>
</tr>
<tr>
<td>
<td>b</td>
<td>a1</td>
</td>
<td>b</td>
<td>b</td>
</tr>
</table>
Could you please help me on this?
Here's the solution
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid lightgray;
font-family: sans-serif;
padding: 7px 15px;
}
<table>
<tbody>
<tr>
<th colspan="2">SOL</th>
<th>K</th>
<th>Y</th>
<th>M</th>
</tr>
<tr>
<td></td>
<td>a1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>a2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>b1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>b2</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
There is a 1px margin/padding around my td elements:
td {
margin: 0;
padding: 0;
background-color: blue;
}
How do I remove this?
You have something that looks like this:
td {
width: 10px;
height: 10px;
background: blue;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Add this CSS to your page:
table, td {
border-collapse: collapse;
}
Like so:
table, td {
border-collapse: collapse;
}
td {
width: 10px;
height: 10px;
background: blue;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Please try this.
<table border="1" style="border-spacing: 0;border-collapse: collapse;">
<tr>
<td>test</td>
<td>test</td>
<tr>
<tr>
<td>test</td>
<td>test</td>
<tr>
</table>
Hope this helps.
Thanks
I want to have something like a matrix in a html page. The content of the table/matrix should be scrollable but the row and column titles should be fixed so they are always visible.
I tried to do that with having 3 tables: one for the column-titles, one for the row-titles and one for the content itself. It looks fine when all the content fits on the page. However, as soon as there is not enough space to fit all the content, the whole thing gets messed up. How can I prevent this from happening and make the tables always appear on one line and add a scrollbar if necessary instead of moving the content table to the next line?
This is my html:
<div class="container">
<div class="tableparent">
<table class = "table rowtitle table-striped">
<tr><td>Logo</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</table>
<table class="table columntitle table-striped">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</table>
<table class="table table-striped">
<tr>
<td>X</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
</tr>
<tr>
<td>X</td>
<td></td>
<td></td>
<td>X</td>
<td></td>
</tr>
<tr>
<td>X</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>X</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
</tr>
<tr>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td>X</td>
</tr>
</table>
</div>
And this is the relevant part of the CSS:
table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
}
.table {
white-space: nowrap;
}
.table th,
.table td {
padding: 8px;
line-height: 20px;
text-align: center;
vertical-align: top;
border: 1px solid #dddddd;
}
.table th {
font-weight: bold;
}
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
.rowtitle {
float: left;
padding: 8px;
border-right: 0px;
height: 200px;
}
.rowtitle th,
.rowtitle td {
border-right: 0px;
}
.columntitle {
padding: 8px;
border-bottom: 0px;
}
.columntitle th,
.columntitle td {
border-bottom: 0px;
}
.tableparent {
width: 100%;
}
Any help appreciated!
This works in all modern browsers that I tried. I had to mess around with several things for a while, but the result seems to be what you wanted. The trick was to put position:absolute for top row and the content section. I changed your html slightly as well
HTML (changed slightly):
<div class="container">
<div class="tableparent">
<table class = "table rowtitle">
<tr><td>Logo</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</table>
<table class="table columntitle">
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</table>
<table class="table content table-striped">
<tr>
<td>X</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td>X</td>
</tr>
<tr>
<td>X</td>
<td></td>
<td></td>
<td>X</td>
<td></td>
<td>X</td>
</tr>
<tr>
<td>X</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>X</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
</tr>
<tr>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td>X</td>
<td>X</td>
</tr>
</table>
</div>
CSS:
table {
border-collapse:collapse;
table-layout:fixed;
}
table * {
height:50px;
width:50px;
min-width:50px;
min-height:50px;
margin:0px;
padding:0px;
}
.rowtitle {
float:left;
opacity:1;
z-index:3;
}
.table th,
.table td {
text-align: center;
border: 1px solid #dddddd;
}
.table th {
font-weight: bold;
}
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
.columntitle {
z-index:1;
position:fixed;
}
.content {
position:fixed;
left:60px;
top:59px;
width:255px;
overflow-x:auto;
display: block;
}