LAST EDIT:
After more than 3 hours I finally found a way to make everything work fine. I just added a <div> around the <table> tag and then gave it the position and transform properties along with width and now it’s all good. I’m editing the code so that it works if anyone will ever need it.
I created this table in HTML and added CSS to make it look better, I also succeeded in centering it to the page and now the only missing thing is a wider tfoot, but I can’t manage to get it right.
This is the code I wrote till now:
- HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Value Chain</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<div class="container">
<table>
<tbody>
<tr>
<td colspan="3">
<h2>INFRASTRUCTURAL ACTIVITIES</h2>
<ul>
<li>Buying an office</li>
<li>Spaces organization</li>
<li>Servers installation</li>
</ul>
</td>
<td rowspan="4" colspan="2" class="marg"><h1>MARGIN</h1></td>
</tr>
<tr>
<td colspan="3">
<h2>HUMAN RESOURCES</h2>
<ul>
<li>Qualified personnel</li>
<li>Training</li>
<li>Cafeteria</li>
</ul>
</td>
</tr>
<tr>
<td colspan="3">
<h2>TECH DEVELOPMENT</h2>
<ul>
<li>PC configuration</li>
<li>Servers configuration</li>
<li>Securing the company network</li>
</ul>
</td>
</tr>
<tr>
<td colspan="3">
<h2>SUPPLYING</h2>
<ul>
<li>Buying and mantaining devices</li>
<li>Buying programming suites</li>
<li>Buying a VPN</li>
</ul>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<h2>INPUT LOGISTICS</h2>
<ul>
<li>Agreements with creators of programming suites</li>
<li>Customers' requests</li>
</ul>
</td>
<td>
<h2>OPERATIVE ACTIVITIES</h2>
<ul>
<li>Conceptual planning</li>
<li>Research</li>
<li>Software development</li>
<li>Quality check</li>
</ul>
</td>
<td>
<h2>OUTPUT LOGISTICS</h2>
<ul>
<li>Agreements with other societies</li>
<li>Sale of licenses to customers</li>
</ul>
</td>
<td>
<h2>MARKETING</h2>
<ul>
<li>Ads and sponsoring</li>
<li>Sales plans</li>
<li>Surveys</li>
</ul>
</td>
<td>
<h2>SERVICES</h2>
<ul>
<li>Customer support</li>
<li>Periodical updates</li>
</ul>
</td>
</tr>
</tfoot>
</table>
</div>
</main>
</body>
</html>
- CSS:
/* resets */
*:not(ul) {
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* smooth scrolling */
html {
scroll-behavior: smooth;
}
/* general */
body {
font-family: NeverMind, sans-serif;
letter-spacing: 1px;
}
main {
display: flex;
justify-content: center;
align-items: center;
}
/* index start */
.container {
width: 70%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
table {
top: 50%;
left: 50%;
border: 3px solid #000;
border-radius: 10px;
}
td {
background-color: lightblue;
border: 3px solid #fff;
border-radius: 10px;
padding: 10px 1rem;
}
.marg {
background-color: orange;
text-align: center;
}
h1 {
font-size: 36px;
}
tfoot td {
vertical-align: top;
background-color: cyan;
width: 360px;
}
h2 {
color: red;
font-size: 36px;
text-shadow: 1px 1px 3px #000;
}
li {
font-size: 24px;
}
/* index end */
I tried adding
tfoot {
width: XXpx; /* XX being a random number */
}
but it didn’t work.
The only property I found that does the work is padding, but it’s useless because I need the text to "squish" by occupying less lines without reducing font-size.
I thought the problem could be either the position: absolute; or the transform properties I used to center the table, so I tried removing them and it actually widened, but adding the tfoot CSS code back resulted in no changes again, so now I’m back to the start.
EDIT:
I removed position and transform again and managed to solve the width problem, but now the problem is that the table isn’t centered anymore… so is there a way of centering it without using those two properties?
2
Answers
Found a possible solution by myself, so I'm closing the question. Thanks to those who reached out :)
did you try any alternative approaches? like to control width of tfoot cells using percentage values or flexboxe or layout properties?