I want a row width go beyond the page instead of fitting into it

Question

I have a col and inside the col there's a table. I want the col and table to go beyond the width of the page when I see the website from a mobile phone or tablet. I know it sounds strange but it's the request they made. Right know I still haven't add any css and the page fits perfectly any device but since it's been created for computers when I watch it from a mobile or tablet the text in the rows looks like this:

it fits the screen but I don't want it, I want the website page to create a scrollbar and the col and table to go beyond the size of the page to make the text inside the rows look good.

Thank you

Answer 1

Short: Get to know how the CSS Flexbox Model work and use it.

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Detailed: Use display: flex; for your parent container (.row) and for rows inside your table selector (.table-row). The direction of the child elements (.col or table-item) can then be easily controlled with the flex-direction property. All other properties and their values control how much space the child elements can take - in this case: the .col and .table-item.

/* Minimal reset */
*, *::before, *::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* centering on larger screens */
.container {
  width: min(100% - 1em, 75em);
  margin-inline: auto;
  border: 1px dashed black;
}

/* */
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .5rem; /* gap between columns */
  padding: .5rem;
}

.col {
  flex-basis: 100%;
}

/* Identical rules also for the table, row & items*/
.table {
  width: 100%;
  border: 1px solid blue;
}

.table-row {
  display: flex; 
  flex-direction: column; 
}

.table-item {
  width: 100%;
  padding: .5rem;
  margin: .25rem;
  border: 1px dotted red;
}




/* mobile-first media querie */
@media (min-width: 500px){
  .col {
    flex: 1;
  }
  
  .table-row {
    flex-direction: row;
  }
}

<div class="container row">
  <div class="col">
    <table class="table">
      <tr class="table-row">
        <td class="table-item">table 1 > item 1</td>
        <td class="table-item">table 1 > item 2</td>
      </tr>
    </table>
  </div>
  <div class="col">
    <table class="table">
      <tr class="table-row">
        <td class="table-item">table 2 > item 1</td>
        <td class="table-item">table 2 > item 2</td>
      </tr>
    </table>
  </div>
</div>