2012-01-17 8 views
8

Ho una tabella in cui il numero di colonne può cambiare (da 1 a 10), con l'eccezione di una colonna che dovrebbe sempre rimanere ad una larghezza fissa in modo che non ci sia spazio extra o non si avvolga (sarà utilizzato per aggiungere o eliminare righe nella tabella).Posso mescolare la larghezza percentuale e la larghezza del pixel nelle intestazioni della tabella html?

La tabella non deve essere più larga di 800 px totali e mi piacerebbe avere un pulsante di invio a destra.

C'è un modo per impostare le larghezze della colonna della tabella che cambiano in percentuale e l'una colonna statica come larghezza fissa del pixel? O causerà problemi? Ho provato un certo numero di approcci diversi, ma tutti sembrano non ottimali. C'è un modo elegante per farlo? Ho allegato una foto per riferimento: http://bayimg.com/BAlLLaaDP.

Il HTML:

<html> 
    <head> 
    <style> 
     #container { 
     width: 800px; 
     } 
     #table_container { 
     padding:5px; 
     } 
     #table_container table { 
     width: 85%; 
     } 
     .action { 
     } 
     col { 
     width:29%; 
     } 
     table { 
     width:650px; 
     table-layout: fixed; 
     float: left; 
     } 
    </style> 
    </head> 

<body> 
<div id="container" class="clearfix"> 

    <form> 
      <table class="" border=1> 
       <colgroup> 
        <col > 
        <col> 
        <col> 
        <col class="action"> 
       </colgroup> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Email </th> 
       <th></th> 
       <tr> 
        <td>content 1</td> 
        <td>content 2</td> 
        <td>content 3 </td> 
        <td><a href="">delete row</a> 
       </tr> 
       <tr> 
        <td>content 1</td> 
        <td>content 2</td> 
        <td>content 3 </td> 
        <td><a href="">delete row</a> 
       </tr> 
      </table> 
     <div class="mult_answer"> 
      <button class="button orange">Submit Answer</button> 
     </div> 
     </form> 

</div> 

</body> 
</html> 

risposta

5

possono avvenire righe con larghezza in pixel e percentuale in una tabella se la larghezza totale di tutte le righe non è superiore al 100% (se più di righe o tabella verrà dimensionata per contenuto adatto).
È possibile aggiungere larghezza agli elementi th se si utilizza col solo a scopo di larghezza. È meglio lasciare almeno una colonna senza larghezza in modo che possa ridursi per adattarsi.
P.S. Non capisco perché hai bisogno di width: 100%; per l'elemento td.

+0

Grazie. Ho rimosso la larghezza per l'elemento td, che non doveva essere lì. – David

Problemi correlati