The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Css fix/freeze row and column border line missing
newbie125
post May 18 2023, 01:24 AM
Post #1





Group: Members
Posts: 1
Joined: 18-May 23
Member No.: 28,929
I wanted to freeze/fix the table first row and first 2 columns. Below code works, only that when scrolling left to right, the first 2 columns left and right border are gone. Any commend?


<html>

<style type="text/css">
table.sample {
border-width: thin thin thin thin;
border-spacing: 4px;
border-style: ridge ridge ridge ridge;
border-color: black;
border-collapse: collapse;
background-color: lightyellow;
text-align: center;
word-break: break-all;
overflow: scroll;
width: 400px;
table-layout:fixed;
}
table.sample th {
border-width: 2px 2px 2px 2px;
padding: 3px 3px 3px 3px;
border-style: ridge ridge ridge ridge;
border-color: black;
background-color: aqua;
-moz-border-radius: 3px 3px 3px 3px;
text-align: center;
word-break: break-all;
}
table.sample td {
border-width: 2px 2px 2px 2px;
padding: 3px 3px 3px 3px;
border-style: ridge ridge ridge ridge;
border-color: black;
-moz-border-radius: 3px 3px 3px 3px;
text-align: center;
word-break: break-all;
}
thead th {
top: 0;
position: sticky;
z-index: 20;
background-color: aqua;
border-color: black;
}
.category_col {
left: 0;
position: sticky;
background-color: lightyellow;
border-color: black;
border-left-color: black;
border-right-color: black;
}
.stage_col {
left: 150px;
position: sticky;
background-color: lightyellow;
border-color: black;
border-left-color: black;
border-right-color: black;

}
.fixed_header {
z-index: 50;
}
</style>

<table class="sample">
<thead>
<tr>
<th width="150" class="category_col fixed_header">Category</th>
<th width="150" class="stage_col fixed_header"><font color=brown>Stages </font></th>
<th width="350"> a </th>
<th width="350"> b </th>
<th width="350"> c </th>
<th width="350"> d </th>
<th width="350"> e </th>
<th width="350"> f </th>
<th width="350"> g </th>
</tr>
</thead>
<tr>
<td class="category_col" scope="row" rowspan="8"><b>Info</b></td>
<td class="stage_col" scope="row"><b>Stage 1</b>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>

<tr>
<td class="stage_col" scope="row"><b>Stage2</b>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>

<tr>
<td class="stage_col" scope="row"><b>Stage3</b>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>

<tr>
<td class="stage_col" scope="row"><b>Stage4</b>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>

<tr>
<td class="stage_col" scope="row"><b>Stage5</b>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>

<tr>
<td class="stage_col" scope="row"><b>Stage6</b>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td class="stage_col" scope="row"><b>Stage7</b>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td class="stage_col" scope="row"><b>Stage8</b>
<td>y</td>
<td>y</td>
<td>y</td>
<td>y</td>
<td>y</td>
<td>y</td>
<td>y</td>
</tr>
</table> <br><br>
</html>

This post has been edited by newbie125: May 18 2023, 01:42 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 18 2023, 11:41 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(newbie125 @ May 18 2023, 08:24 AM) *

I wanted to freeze/fix the table first row and first 2 columns.

Cool, I didn't know that was possible without extensive hacks. cool.gif

QUOTE
Below code works, only that when scrolling left to right, the first 2 columns left and right border are gone. Any commend?

It seems some to depend on what border-widths I give the the TABLE and TH elements. Maybe this is caused by "border-collapse: collapse", maybe in combination with the sticky positioning? Alas I'm not familiar with sticky positioning. unsure.gif

This border-spacing does not work:
QUOTE
border-spacing: 4px;
border-collapse: collapse;

since according to https://www.w3.org/TR/css-tables-3/#propdef-border-spacing it only applies when the value of "border-collapse" is "separate".

I also suggest simplifying the CSS to begin with, such as replacing:

QUOTE
border-width: thin thin thin thin;
border-style: ridge ridge ridge ridge;
border-color: black;

with this shorthand:

CODE
border: thin ridge black;

or
QUOTE
padding: 3px 3px 3px 3px;

with
CODE
padding: 3px;


The border-color properties here are redundant:

QUOTE
.category_col {
border-color: black;
border-left-color: black;
border-right-color: black;
}

since border styles (including black color) are already defined by the "table.sample td {...}" rule. And if it wasn't, specifying just border-color without any border-style would not work anyway...

As a sidenote, the FONT element is deprecated:
QUOTE
<font color=brown>Stages </font>

Style the TH element instead (or use a more semantically meaningful element than FONT, if applicable).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 18 2023, 05:41 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
What browser? It doesn't happen to me in FF. Works just fine. I scrolled back and forth and all borders were still there. Edge is also fine. The page crashes k-meleon though the moment I grab the window to resize it I so I can scroll.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 18 2023, 07:11 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ May 19 2023, 12:41 AM) *

What browser? It doesn't happen to me in FF. Works just fine. I scrolled back and forth and all borders were still there. Edge is also fine.

My FF shows no borders around the TH elements in the first row, or in the first two columns. Vivaldi shows all the borders, there they only become covered when you start scrolling, but I suppose that's normal. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 18 2023, 09:49 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
Ah. I guess I misunderstood. Those have no borders to start with either. I thought borders disappeared when scrolling.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 12:28 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC