CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Observer
Observer

Reputation: 377

issue with column width

ISSUE DEMO

In HTML table, on select of an item in 1st row, 2nd row is made visible(Table has 2 columns).

Now here in 2nd row, column width is shrinked which is highlighted in blue. Why is that so?

Have been trying to surf for couple of days but none seems to be working.

It would be helpful if anyone would point out what's wrong.

function showDiv(select){
   if(select.value==2){
    document.getElementById('future_date').style.display = "block";
   } else{
        document.getElementById('future_date').style.display = "none";
   }
} 
.table1 {
  color: #2a2929;
  padding-top: 20px;
  margin-bottom: 7px;
  text-align: center;
}

.col-md-12 {
  width: 100%;
}

.table1 table {
  width: 100%;
  text-align: center;
  padding: 10px;
  background-color: grey;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 25px;
}

.table-text-filed{
  width:100%;
  border:1px solid #d4d5d7;
  color:#2a2929;
  text-align: center;
}

.body {
  color: #fff;
  font-size: 18px;
  line-height: 23px;
  font-family: calibri;
}

.table1 td {
  padding: 5px;
  background-color: white;
}

.table1 tr {
  padding: 5px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-12 table1">
  <table border="1">
    <tr>
        <td col width="40%">Type</td>
        <td>
            <select name="token_date_id" onchange="showDiv(this)" class="table-text-filed" required>
                <option value="1">Today</option>
                <option value="2">Future Date</option>
            </select>
        </td>
    </tr>
    <tr id="future_date" style="display:none">
        <td  col width="40%">Select Date</td>
        <td>
            <input type="date" name="token_date" value="" class="table-text-filed" data-date='{"startView": 2}'>
        </td>
    </tr>
  </table>
</div>

Upvotes: 0

Views: 60

Answers (2)

Nidhin Chandran
Nidhin Chandran

Reputation: 856

change display value from 'block' to 'table-row'

function showDiv(select){
   if(select.value==2){
    document.getElementById('future_date').style.display = "table-row";
   } else{
        document.getElementById('future_date').style.display = "none";
   }
} 
.table1 {
  color: #2a2929;
  padding-top: 20px;
  margin-bottom: 7px;
  text-align: center;
}

.col-md-12 {
  width: 100%;
}

.table1 table {
  width: 100%;
  text-align: center;
  padding: 10px;
  background-color: grey;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 25px;
}

.table-text-filed{
  width:100%;
  border:1px solid #d4d5d7;
  color:#2a2929;
  text-align: center;
}

.body {
  color: #fff;
  font-size: 18px;
  line-height: 23px;
  font-family: calibri;
}

.table1 td {
  padding: 5px;
  background-color: white;
}

.table1 tr {
  padding: 5px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-12 table1">
  <table border="1">
    <tr>
        <td col width="40%">Type</td>
        <td>
            <select name="token_date_id" onchange="showDiv(this)" class="table-text-filed" required>
                <option value="1">Today</option>
                <option value="2">Future Date</option>
            </select>
        </td>
    </tr>
    <tr id="future_date" style="display:none">
        <td  col width="40%">Select Date</td>
        <td>
            <input type="date" name="token_date" value="" class="table-text-filed" data-date='{"startView": 2}'>
        </td>
    </tr>
  </table>
</div>

Upvotes: 1

reza
reza

Reputation: 1507

What i saw in the demo link is 2 column is showing but both 1 and 2 displayed one after another, not like table cell. the reason is you put display property to block. use table-row instead.

Replace the following line

document.getElementById('future_date').style.display = "block";

With 

document.getElementById('future_date').style.display = "table-row";

Hope this helps.

Upvotes: 5

Related Questions