1 Correct answer
Here's an example :
...
<html>
<head>
<style>
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th, table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
@media screen and (max-width: 600px) {
table {
border: 0
14
Replies
I updated that example a tad so you can copy and paste into a blank document and see how it works firstly, then look at applying similiar to the tables on your site.
If you need more specifics, post back & I'm sure somebody will be able to help you 
It looks to me as if the OP is using Bootstrap 4 and jQuery 3.2. No markup was posted so it's unclear if these are data tables or not. Obviously, tables for layout are unacceptable for modern responsive design.
Energize wrote
Nancy,
I can see you like to get the last word as always and are trying to have some sort of pointless p*ssing contest again ...
I'm not sure what I did that got your knickers in such a tight knot. I have no problem with your correct answer. I was merely responding to the OP's follow-up questions in reply #3.
"What I was thinking, and I don't know if it's possible, was a table where you see three columns next to each other, left to right. But, on mobile those same columns are now stacked, top to bottom. (So everything is on a smaller screen, but there is no need to scroll."
You can do that with definition lists styled to look like tables as mentioned in reply #8. On smaller viewports, the defintion list columns break to a 2nd row.
Responsive tables with collapsing flexbox columns or rows are also possible.
Accessible, Simple, Responsive Tables | CSS-Tricks
And the OP went on to say...
"I know that in your example, there is no need to scroll, but it also makes the text small, and even smaller the more content there is."
See my approach for Scaling Fonts for Any Size Screen below.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scale Fonts for Any Size Screen</title>
<style>
body {
margin: 0 auto;
width: 80%;
font-family:
Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
/**font size grows 1px for every 100px of viewport width**/font-size: calc(14px + 1vw);
/** line-height grows with font size, an additional 0.1em + 0.5px per 100px of the viewport**/
line-height: calc(1.1em + 0.5vw);
}
</style>
</head>
<body>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nostrum similique, dolores enim quam provident, deserunt tempora molestias. Nisi laboriosam quam dolor, officia magni error? Sint nihil dolore debitis doloremque.</p>
</body>
</html>
AdChoices