CODEWITHSUNDEEP
jqueryhtmlcss
Sukhomlin Eugene
Sukhomlin Eugene

Reputation: 183

Table is goin outta div

I have div with table

Here is code

<div id="container" style="width: 100%; height: 700px;margin-top: 85px; white-space: nowrap;">
<div style="float: left;width: 80%; table-layout: fixed;">
    <table class="table" style="width: 80%;border-style: solid;border-color: #1d69b4;border-radius: 10px;border-collapse: separate">
        <tr>
            <th style="font-size: 18px; text-align: center;">
                <b>Hours</b><b style="padding-left: 30px;"> Monday</b>
            </th>
            <th style="font-size: 20px; text-align: center;">
                <b>Hours</b><b style="padding-left: 30px;"> Tuesday</b>
            </th>
            <th style="font-size: 20px; text-align: center;">
                <b>Hours</b><b style="padding-left: 30px;"> Wednesday</b>
            </th>
            <th style="font-size: 20px; text-align: center;">
                <b>Hours</b><b style="padding-left: 30px;">  Thursday</b>
            </th>
            <th style="font-size: 20px; text-align: center;">
                <b>Hours</b><b style="padding-left: 30px;">  Friday</b>
            </th>
            <th style="font-size: 20px; text-align: center;">
                <b>Hours</b><b style="padding-left: 30px;"> Saturday</b>
            </th>
            <th style="font-size: 20px; text-align: center;">
                <b>Hours</b><b style="padding-left: 30px;"> Sunday</b>
            </th>
         </tr>
        <tr>

          </tr>
    </table>
 </div>

My problem is table getting outta div

Screen

I try to use table-layout: fixed; but it seems not works.

Where is my mistake?

Thank's for help.

Upvotes: 0

Views: 31

Answers (1)

Patrick Atoon
Patrick Atoon

Reputation: 769

The content of your table cells is pushing the width of the table, which is why it cannot obey the width you set. You can easily see this by playing with the th font size in this example:

#container {
  border: 1px solid red;
  width: 100%;
  height: 700px;
  margin-top: 85px;
}

#container div {
  border: 1px solid blue;
  float: left;
  width: 80%;
}

table {
  border: 3px solid #1d69b4;
  border-radius: 10px;
  border-collapse: separate;
  display: block;
}

th {
  font-size: 12px;
  text-align: center;
  border: 1px solid green;
}

.pad-left {
  padding-left: 30px;
}
<div id="container">
  <div>
    <table>
       <tr>
         <th>Hours Monday</th>
         <th>Hours Tuesday</th>
         <th>Hours Wednesday</th>
         <th>Hours Thursday</th>
         <th>Hours Friday</th>
         <th>Hours Saturday</th>
         <th>Hours Sunday</th>
       </tr>
     </table>
   </div>
 </div>

Solution: adjust your content or your styling so it will fit your table.

Upvotes: 2

Related Questions