I'm currently building a web app with vuetify, and i'm having an issue with a table that is taking me a lot of time. I'd like to have like a scroller on mobile that allow you to see the table while keeping the aspect ratio and not stretching itself. I'll post the code down here and a picture of how the table is showed in a mobile view. I already tried adding overflow: auto and overflow: scroll but nothing it's changing. Can you help me?
Code:
<table id="tabellaPunteggi" style="overflow-x:auto;">
<tbody>
<tr>
<td class="remove" colspan="3">Buca</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>=</td>
<td>+/-</td>
</tr>
<tr>
<td class="remove" colspan="3">PAR</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>4</td>
<td>4</td>
<td>5</td>
<td>3</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>4</td>
<td>4</td>
<td>5</td>
<td>3</td>
<td>72</td>
<td></td>
</tr>
<tr>
<td class="remove" colspan="3">Score</td>
<td>4</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>3</td>
<td>7</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>9</td>
<td>4</td>
<td>3</td>
<td>5</td>
<td>4</td>
<td>9</td>
<td>5</td>
<td>3</td>
<td>3</td>
<td></td>
<td>-9</td>
</tr>
</tbody>
</table>
<!-- Here is the table -->
And the css i tried using:
table#tabellaPunteggi{
margin: 0 auto;
border-collapse: collapse;
}
table#tabellaPunteggi tr td:not(.remove){
width: 45px;
height:45px;
}
table#tabellaPunteggi tr td {
border: solid 1px black;
}
table#tabellaPunteggi tr td.remove {
width: 75px;
}
Any help is appreciated!
Thanks for your time! Have a nice day!
Edit (28/01/2022):
I tried using your answers (i really appreciate them), but there is like another problem.
I screenshot it so you can see clearly at this link: https://imgur.com/a/AQfQdOz
Thanks for your help!
Set a min width on the td
you don't need the :not(.remove) since you set the width for .remove afterwards.
table#tabellaPunteggi tr td{
min-width: 45px;
height: 45px;
}
table#tabellaPunteggi tr td.remove {
min-width: 75px;
}
This will keep things as is
just update your this css lines as i updated for you
table#tabellaPunteggi{ border-collapse: collapse; overflow: hidden; min-width:500px }
Related
I tried to create html tables with header.
I added 2 rows but I couldn't figure out how to align to header.
My desired result is like this.
below is my previous work.
What is wrong point? how can I fix it? if someone has opinion please let me know.
Thanks
td {
padding:5px;
border:solid black 1px;}
table{
border-collapse:collapse;
border:solid black 1px;}
<table>
<tr>
<th>header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
I hope this will help you:
td {
padding:5px;
border:solid black 1px;}
table{
border-collapse:collapse;
border:solid black 1px;}
<table>
<tr>
<th rowspan="2">header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
You have to use rowspan="2" since you want to merge 2 rows.
td {
padding: 5px;
border: solid black 1px;
}
table {
border-collapse: collapse;
border: solid black 1px;
}
<table>
<tr>
<th rowspan="2">header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
Please find attached the solution:
<table>
<tr>
<td rowspan="2"> Header</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
I have html tables and I would like to add summary columns next to it.
I could create simple table, but I couldn't figure out how to set separate tables next to it.
My desired result is described below. If someone has idea, please let me know.
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Here you go with a solution
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
.noborder {
border: none;
padding: 5px 8px;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="noborder"></td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td class="noborder"></td>
<td>2</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td class="noborder"></td>
<td>2</td>
</tr>
</table>
Rather than creating another table I will suggest to use the no-border cell.
Hope this will help you
According to your requirement, you actually do not need another table, but in future if you want to use table side by side then you can use below solution.
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
float:left;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<table style="margin-left:20px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
I have a table and I want to make the first row different background color for instance blue. I use table tr:first-child but it doesn't work. Can you help me? Thanks.
<table>
<tr><td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr><td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr><td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
You can use tr:first-of-type. check updated snippet below.
table tr:first-of-type td {
background: blue;
}
<table>
<tr><td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr><td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr><td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
you can use this:
table tr:first-child {
background: blue;
}
or you can add class to your first tr
.bg-blue {
background:blue;
}
<table>
<tr class="bg-blue">
<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>
</table>
You can use this snippet.
table tr:first-child td {
background: blue;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Hope this helps :)
As you are saying the first-child is not working, I suggest you check it's parent property if it has any property which is overriding your first-child property. Basically, it should work that way. Also, I would like to know which browser actually you are seeing the issue.
Try this:
table tr:first-child {
background:blue;
color:white;
}
<table>
<tr><td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr><td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr><td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
You can add a comment with your issue if still it is not resolved with the solution.
I am taking my first web programming course but the instructor isn't much help. After trying to contact him for that past week I decided to look through the web for help and guidance.
My question is: how can I distinguish between the programmed Sudoku numbers and the empty cells that the user needs to fill in? Preferably, I would like to make the programmed cells to have a gray background while the empty cells to have no formatting.
Currently in my css file I have this:
table {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
text-align: center;
border-collapse: collapse;
}
td {
border: 1px solid #000;
width: 40px;
height: 40px;
}
tr:nth-child(1) td{
border-top-width: 3px;
}
td:nth-child(1) {
border-left-width: 3px;
}
td:nth-child(3), td:nth-child(6), td:nth-child(9){
border-right-width: 3px;
}
tr:nth-child(3) td, tr:nth-child(6) td, tr:nth-child(9) td{
border-bottom-width: 3px;
}
Here is my html file (not final formatting but gives an idea):
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<table>
<tr>
<td>Start Timer</td>
<td>Reset Timer </td>
<td>Timer:_________.</td>
</table>
<table>
<tr>
<td>2</td>
<td></td>
<td>8</td>
<td>3</td>
<td></td>
<td>5</td>
<td>7</td>
<td>1</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>7</td>
<td>1</td>
<td></td>
<td>2</td>
<td>8</td>
<td></td>
<td>4</td>
<td></td>
</tr>
<tr>
<td>9</td>
<td></td>
<td></td>
<td>7</td>
<td></td>
<td>1</td>
<td>5</td>
<td>8</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>8</td>
<td></td>
<td>5</td>
<td>3</td>
<td></td>
<td>1</td>
<td>7</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td>9</td>
<td></td>
<td></td>
<td></td>
<td>6</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>1</td>
<td>4</td>
<td></td>
<td>6</td>
<td></td>
<td>9</td>
<td></td>
<td>3</td>
</tr>
<tr>
<td></td>
<td>6</td>
<td>3</td>
<td></td>
<td>1</td>
<td>7</td>
<td>2</td>
<td>9</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>9</td>
<td></td>
<td>2</td>
<td>8</td>
<td>6</td>
<td></td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>2</td>
<td></td>
<td>9</td>
<td></td>
<td>3</td>
<td>8</td>
<td>6</td>
<td></td>
</tr>
</table>
</body>
</html>
EDIT
So I added this to my CSS file and it actually works but I don't get why. Is this recommended. I know there is probably a handful of solutions to my question but is this an actual solution or did I get lucky that my project is actually working.
td {
border: 1px solid #000;
width: 40px;
height: 40px;
background-color: gray;
font-weight: bold;
empty-cells:
}
td:empty {
background-color: transparent;
}
add 2 class to td fill and empty
and if it cell is fill add class "fill" to it
td.fill{
background: #000;
}
td.empty{
background: transparent;
}
I have a css class on table <tr> tags but i want to stop it from being added on one <td>
is this possible? can i add a seperate class to the specific <td> to stop the <tr>'s class being added?
You could use the :not selector (which you can use to filter all bar the selector within the brackets):
table td:not(.this) {
background: red;
color: blue;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td class="this">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
Alternatively, you could use a class selector if you wanted to style it differently (rather than not at all):
table tr {
background: red;
color: blue;
}
.this {
background: green;
color: white;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td class="this">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
tr.MyClassName{
// styling goes here
}
That should only style the tr but not the td.