Put border around table and certain rows and columns

HTML & CSS
1

Hello, I have a table with rows and columns. I need it to have the table have a border and group info a11, b44, c77 and a22, b55, c88 and so on so each grouping has their own border also. What would be the best way to do that? If it’s something other than a table I’ll be up for that. Final results I need is to have 3 columns and 12 row with an outter border and with 1 column/3 rows to have their own border. How could I do that?

What I have so far as an example:

a11 a22 a33
b44 b55 b66
c77 c88 c99
d11 d22 d33
e44 e55 e66
f77 f88 f99
2

Do you mean a border on each of these individual cells, or one border that surrounds all those cells?

3

Border around the table and group of cells ie the area that has info a11, b44, c77 would have a border around it, with the surrounding table. Don’'t know if can be done with tables.

4

You can do something like this but is a little convoluted and I can’t really see the correlation for tabular data as such which means a straight flexbox or indeed css grid would be a better choice than a table element.

I had to change the table to a display:flex in order to move the borders as you can’t do that in a table (unless you used nested tables perhaps).

It could also be a lot simpler with appropriate classes added.:slight_smile:

5

Hi there twistcf,

here is a very basic and simple example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.5em sans-serif;
 }

div {
	display:inline-block;
	padding: 0.25em;
	border: 1px solid #000;
	background-color: #fff;
}

table {
	border:1px solid #000;
	border-collapse: collapse;
}

td {
	padding: 0.5em;
}

tr td:nth-child(1) {
	background-color: #fee;
}

tr td:nth-child(2) {
	border-right: 1px solid #000;
	border-left: 1px solid #000;
	background-color: #fef;
}

tr td:nth-child(3) {
	background-color: #eef;
}    
</style>

</head>
<body>

<div>
 <table>
  <tbody>
   <tr>
    <td>a11</td><td>a22</td><td>a33</td>
   </tr><tr>
    <td>b44</td><td>b55</td><td>b66</td>
   </tr><tr>
    <td>c77</td><td>c88</td><td>c99</td>
   </tr><tr>
    <td>d11</td><td>d22</td><td>d33</td>
   </tr><tr>
    <td>e44</td><td>e55</td><td>e66</td>
   </tr><tr>
    <td>f77</td><td>f88</td><td>f99</td>
   </tr>
  </tbody>
 </table>
</div>

</body>
</html>

coothead

6

This is what I was looking for.

Thanks

1 Like
7

Just for fun I added a second slightly simpler example that leaves the display as table (the default) and used :before and :after to fill in the gaps.

2 Likes
8

One small issue I’m seeing, is when I put in content on phones the table and cells don’t line up. Is there and easy fix for that?

Thanks

9

Sorry posted that without trying version 2. That works better on phones.

Thanks

10

Yes version 2 should be more solid as it doesn’t change the table behaviour at all. :slight_smile:

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.