Ширина для столбцов таблицы не будет установлена - PullRequest
Новая
       11

Ширина для столбцов таблицы не будет установлена

2 голосов
/ 27 ноября 2011

Если вы посмотрите на все мои теги <th> в теге <thead> в таблице, вы увидите, есть ли у каждого <th> свой собственный класс: col1, col2, col3 и col4.

Я пытаюсь установить максимальную и минимальную ширину для каждого из этих классов, проблема в том, что она вообще не устанавливает ширину. Если установить ширину в процентах, то она не работает, но работает с использованием px, но я хочу использовать процент, так почему же она не устанавливает ширину?

Ниже приведен код таблицы: 

<div id="tableWrapper">
  <div id="tableScroll">
    <table id="qandatbl" align="center">
      <thead>
        <tr>
          <th class="col2">Question No</th>
          <th class="col4">Question</th>
          <th class="col2">Option Type</th>
          <th class="col1">Duration</th>
          <th class="col2">Weight(%)</th>
          <th class="col1">Answer</th>
          <th class="col3">Video</th>
          <th class="col4">Audio</th>
          <th class="col3">Image</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody> 
    </table>
  </div>
</div>

Ниже css; 

#qandatbl{
  font-size:14px;
  border-collapse:collapse;
  text-align:center;
  margin-left:auto; 
  margin-right:auto;
}
.col1{
  background-color:#FCF6CF; 
  max-width:7%;
  min-width:7%; 
  border: 1px solid black;
}
.col2{
  background-color:#FEFEF2;
  max-width:7%;
  min-width:7%;
  border: 1px solid black;  
}   
.col3{
  background-color:#FEFEF2; 
  max-width:16%;
  min-width:16%;    
  border: 1px solid black;
}
.col4{
  background-color:#FCF6CF;
  max-width:16%;
  min-width:16%;    
  border: 1px solid black;
}
#tableWrapper {
  position:relative;
}
#tableScroll {
  height:300px;
  overflow:auto;  
  margin-top:20px;
}
#tableWrapper thead tr {
  position:absolute;
  top:-24px;
}

1 Ответ

0 голосов
/ 27 ноября 2011

1 - установить ширину таблицы

2 - отрегулировать ваши проценты так, чтобы их сумма составляла 100% (принимая во внимание количество раз, когда появляется каждый тип столбца, который, кажется, вдвое больше каждого).

...