Wondering why selectors are not working in an html table from the css.
td {
width: 100px;
height: 100px;
}
td {
border: 1px solid black
}
tr.1 {
border-right: 1px solid black;
border-bottom: 1px solid black;
}
<table>
<tr>
<td class="1"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
all in all i'm trying to make a tic tac toe board by showing certain borders on the 9 table spots. Can't figure out how to select just one "td" at a time to turn the borders on that I need.
Not sure if this helps but class names cannot start with a digit.
Via W3C
Related
I have a table with a 3px black solid border. For some reason, one cell does not display this border but only that of the internal TD. I guess I must have done something incorrectly, but cannot see where it is.
.enumeratorstable1921 {
width: 25%;
margin-left: 75px;
margin-top: 25px;
border-collapse: collapse;
font-style: normal;
border: 3px solid black;
}
.enumeratorstable1921 td {
border: 1px solid black;
height: 1.25em;
text-align: center;
}
<table class="enumeratorstable1921">
<tr>
<td colspan="4">To be filled up by the Enumerator.</td>
<td colspan="2" rowspan="2">Enumerator’s Initials.</td>
</tr>
<tr>
<td>Males.</td>
<td>Females.</td>
<td>Persons.</td>
<td>Rooms.</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
The issue seems to be caused by the unnecessary use of colspan="2" for the last cell in the top row.
There are no actual rows with 6 cells, but by using colspan=4 + colspan=2, you are making the table use 6 columns. I'm not totally sure how browsers work with rows have that fewer actual cells; it could be that they add additional placeholder cells without content.
The empty 6th cell that is (presumably) added by the browser could explain why the 5th cell of the last row is drawn using its own defined border style - because a 6th cell is added, for which the border-collapse is applied, although still in a kinda weird way.
By removing the unneeded colspan="2", the problem no longer occurs:
.enumeratorstable1921 {
width: 25%;
margin-left: 75px;
margin-top: 25px;
border-collapse: collapse;
font-style: normal;
border: 3px solid black;
}
.enumeratorstable1921 td {
border: 1px solid black;
height: 1.25em;
text-align: center;
}
<table class="enumeratorstable1921">
<tr>
<td colspan="4">To be filled up by the Enumerator.</td>
<td rowspan="2">Enumerator’s Initials.</td>
</tr>
<tr>
<td>Males.</td>
<td>Females.</td>
<td>Persons.</td>
<td>Rooms.</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I need to select a table column on click. To show selection, I need to outline the table column.
I managed to outline each in the column needed, see pic:
However, that doesn't suit me: I need to get rid of inner lines.
CSS (actually, LESS) I currently use:
td.fd-selected
{
outline: 0.25em dashed rgb(79,115,176);
background-color: rgba(79,115,176, 0.25);
}
Unfortunately you can't do it with outline. outline is basically used to highlight a focused element in its entirety (mostly form elements). In its default setting, it uses the outline provided either by the operating system or the web browser itself (IE as example for the former, Chrome as example for the latter).
The only reliable (and the least hacky) solution is, to use borders.
Here's how (logic):
Place left and right borders to all cells.
Place top border to the appropriate cell of the first row
Place bottom border to the appropriate cell of the last row
The example below also shows, how you could highlight the header too.
Example
table{
border-collapse: collapse;
}
th {
background-color: #efefef;
}
th, td {
width: 60px;
height: 30px;
border: 1px solid #ccc;
}
td.outline {
border-left: 2px dotted #06c;
border-right: 2px dotted #06c;
}
tr:first-child > td.outline {
border-top: 2px dotted #06c;
}
tr:last-child > td.outline {
border-bottom: 2px dotted #06c;
}
/*how could it look like with the header*/
th.outline {
background-color: #99ccee;
border: 2px dotted #06c
}
<table>
<thead>
<tr>
<th></th>
<th></th>
<th class="outline"></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td class="outline"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="outline"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="outline"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="outline"></td>
<td></td>
</tr>
</tbody>
</table>
I have a table that is controlled by a style sheet.
the table has been created from a poster which my boss wants it to look like. the problem i am having is on the poster there is a gap between two of the columns.
I have tried just putting two tables side by side however this caused me issues if viewed on a mobile devise, so i tried to add a column that had a border left and right and the same colour background as the rest of the page but i cant get rid of the top/bottom borders that are in place from the style sheet.
Style sheet.
.table__container {
overflow-x: scroll;
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
}
tr {
border-bottom: 0px dashed #DDD;
}
table tr th {
color: #88B53D;
}
table tr th, table tr td {
vertical-align: top;
}
.row__header {
border-top: 3px solid #DDD;
}
.row__header--day {
font-size: 1em;
text-transform: uppercase;
}
CSS on page
.nothing {
border-left: 1px solid #DDD;
border-right: 1px solid #DDD;
border-top: 0px;
border-bottom: 0px;
background-color: #eee;
}
HTML table
<div class="table__container">
<table width="100%">
<tr>
<th></th>
<th></th>
<th></th>
<td class="nothing">Gap should be here</td>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="row__header" style="text-align:center;">
<th class="row__header--day"></th>
<td></td>
<td></td>
<td class="nothing">Gap should be here</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
The style sheet was provided to me as part of our branding so i cant mess with it too much.
Is this the expected result? If yes then I will add some explanation.
.table__container {
height: 100%;
width: 100%;
}
table tr td.gap{
width:40%;
text-align:center;
border:none;
}
table tr td{
border:1px solid #000
}
<div class="table__container">
<table width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="gap"></td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="gap"></td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
I am having issue trying to make table 1 look like table 2 using css. I also noticed the increased height and watermark image does not reflect on print preview
Table 1
Table 2
Adding a row at the end of the tbody solve this.
<table>
<thead>
<tr>
<th>S/N</th>
<th>Description of goods</th>
<th>QTY</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Arch</td>
<td>7.92</td>
</tr>
<tr>
<td>2</td>
<td>White</td>
<td>3.96</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid #000;
}
td {
border-top: 0;
border-bottom: 0;
}
table {
height: 150px;
}
tr:last-child {
height: 100%;
}
Check my example https://jsfiddle.net/moisesnandres/4py2m8aq/
I'm trying to duplicate the table below in HTML:
But there are a couple of extra-irregular shaped rows that I'm wondering if there's an easy way to code them using tables, particularly the Schools swim on Friday, and the rentals in the evening on Monday-Thursday.
I know how to use colspan and rowspan but is there some kind of grid design trick in tables these days?
What's the best way to code a table with unorthodox shapes for rows and columns like above?
Here's what I've built so far, but I don't know how to make the extra irregular shapes:
table,
th,
td,
tr {
border: 2px solid #263333;
border-collapse: collapse;
}
.schedule td {
width: 16.6666666%;
vertical-align: middle;
text-align: center;
padding: 0;
}
.schedule tr {
height: 3em
}
.schedule tr {
height: 3em
}
.schedule thead tr {
height: 1em;
color: #f2f5f7;
background: #263333
}
.noborder {
border: 0;
}
<table class="schedule">
<thead>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</thead>
<tbody>
<tr>
<td colspan=4 rowspan=2>
<p>Early Bird Swim</p>
<p>6:00am-8:30am</p>
<td>Early Bird Swim
<br>6:00am-7:30am</td>
<td rowspan=2>Early Bird Swim
<br>6:00am-8:30am</td>
</tr>
<tr>
<td>Staff Meeting 7:30am-8:30am</td>
</tr>
<tr>
<td colspan=4 rowspan=2>Cardston Schools 8:30am-3:00pm</td>
<td>Cardston Schools 8:30am-12:00pm</td>
<td>Rentals 10:00am-12:00pm</td>
</tr>
<tr>
<td colspan=2>Lane Swim / Parent & Tot 12:00-1:00pm</td>
</tr>
<tr>
<td colspan=4>Swim Club 3:15-5:00pm</td>
<td colspan=2>Public Swim 1:00-5:00pm</td>
</tr>
<tr>
<td colspan=6>Lane Swim 5:00-6:00pm</td>
</tr>
<tr>
<td>Family 6-8:00pm</td>
<td colspan=5>Public Swim 6:00pm-8:00pm</td>
</tr>
<tr>
<td>Aqua Fit 8-9</td>
<td></td>
<td>Aqua Fit 8-9</td>
<td></td>
<td colspan=2>Rentals 8:00-10:00pm</td>
</tr>
<tr>
<td colspan=4>Rentals Until 10:00pm</td>
<td colspan=2>Rentals 9:00-10:00pm</td>
</tr>
</tbody>
</table>
You can use colspan and rowspan, but for certain cells, you'll need custom CSS for each cell. You can control the thickness and color of each side of the td cell:
.some-class {
border-left: 1px solid #000000;
border-right: 0px solid #000000;
}
etc., or in shorthand:
border: 1px 1px 0px 1px solid #000;