It's better If I just show you guys a pic of It. Sorry because my indexes are in Portuguese, but basically it's a table that says "Classes/Instances/Names/Observations".

I would like to force my table to stay inside of my div. I'm having this problem both on fullscreen with a 4 column table and in a smaller screen with less columns. Any help is appreciated.

<div >
    <div >
        <div >
            <div >
                <h2 >O que ocorre durante</h2>
            </div>

            <div >
                <table table-layout="fixed" width="100%">
                    <thead>
                        <tr>
                            <td>Classes</td>
                            <td>Instâncias</td>
                            <td>Nomes</td>
                            <td>Observações</td>
                        </tr>
                    </thead>
                    <tbody> 
                        {% for obj in objetos_during %}
                        <tr>
                            <td>{{ obj.classe_inst }}</td>
                            <td>{{ obj.instancia }}</td>
                            <td>{{ obj.nome }}</td>
                            <td>{{ obj.obs }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Sample 1 Sample 2

.recent-grid{
  background-color: #8b0000;
  border-radius: 30%;
  margin: 20px;
}

.card {
  position: relative;
  display: flex;
  flex: auto;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #8b0000;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  box-shadow: 8px 8px 5px black;
}

.card-header {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header button{
  background-color: rgb(220, 20, 60);
  border-radius: 5px;
}

.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.card-body {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
  overflow-x: auto;
}


th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  background-color: #F0F0F0;
}

tbody tr{
  background-color: #F0F0F0;
  border-top: 1px solid #0000;
  border-bottom: 1px solid #0000;
}

thead td{
  font-weight: 700;
  border-top: 1px solid #400002;
  border-bottom: 1px solid #400002;
}

td{
  padding: .5rem 1rem;
  font-size: .9rem;
  color:#000
}

thead tr{
  border-top: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
}

CodePudding user response：

Might be your table-layout="fixed", try using table-layout="auto" instead

CodePudding user response：

.card-body {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

<div >
    <table  style="width:900px;">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
        </tr>
      </tbody>
    </table>
  </div>

you can do with horizontal scroll in parent div.

.card-body{
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

for demo I have applied style on .card-body class that is common class so it can create problem in project so I would suggest create separate class for table scroll.