Ich versuche, ein "div" um ein anderes div, das mehrere Spalten enthalten kann.Multi Spalte div in Tabelle: Enthält div nur Breite der ersten Spalten

aber wie Sie sehen können here

<table class="datatable"> 
<tr> 
    <td class="leftcolumn">Radiobuttons:</td> 
    <td class="rightcolumn"> 
     <div style="border: 2px solid grey;"> 
     before 
     <div class="morecols"> 
      <label><input type="radio" name="ctypeid" value="1" /> One</label><br /> 
      <label><input type="radio" name="ctypeid" value="2" /> Two</label><br /> 
      <label><input type="radio" name="ctypeid" value="3" /> Three</label><br /> 
      <label><input type="radio" name="ctypeid" value="4"checked="checked" /> Four</label><br /> 
      <label><input type="radio" name="ctypeid" value="5" /> Five</label><br /> 
      <label><input type="radio" name="ctypeid" value="6" /> Six</label><br /> 
      <label><input type="radio" name="ctypeid" value="7" /> Seven</label><br /> 
      <label><input type="radio" name="ctypeid" value="8" /> Eight</label><br /> 
      <label><input type="radio" name="ctypeid" value="9" /> Nine</label> 
     </div>after 
     </div> 
    </td> 
</tr> 
</table>

die blau gefärbte div nur so breit wie die erste Spalte ist. Ich möchte alle drei enthalten.

Was fehlt mir hier?

Quelle

2016-04-25 Andreas - Dellekom

Geben 100% Breite Tabelle wie diese "

" Es helfen könnte. –

Überprüfen Sie die Eigenschaft [Spaltenregel] (https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule). – skobaljic

Antwort

ich mich verändert habe zwei Dinge

1. 100% Breite auf den Tisch

<table class="datatable" width="100%">

2. Reduzierte Breite von‘.morecols' Klasse 100px;

.morecols { 
    height: 65px; 
    -moz-columns: 100px; 
    -webkit-columns: 100px; 
    columns: 100px; 
    border: 1px solid black; 
    column-rule: 1px solid grey; 
    background-color: #ccccff; 
}

Jetzt sieht es gut aus.

prüfen aktualisiert Geige hier: https://jsfiddle.net/b4fucp5x/1/

Quelle

2016-04-25 17:56:48

Vielen Dank für Ihren Beitrag Kaushal aber ich würde es vorziehen, wenn der Tisch nicht breiter ist als nötig. Gibt es einen Weg? –

.morecols { <br> 
    height: 65px; 
    -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
    -moz-column-count: 3; /* Firefox */ 
    border: 1px solid black; 
    column-rule: 1px solid grey; 
    background-color: #ccccff; 
}

Quelle

2016-04-25 18:12:11

Ändern Sie einfach die CSS-Klasse wie oben :) Viel Glück –

Dank Alsida, aber ich möchte lieber nicht wissen, wie viele Spalten wird es sein, deshalb setze ich die Höhe ... –

So wissen Sie nicht, wie viele Spalten wird es sein, und Sie wollen nicht, Tabelle nicht als notwendig breiter sein.

Okay, so zu tun, wieder ich getan habe zwei Dinge zu Ihrem bereitgestellten Code

entfernt <br>-Tag aus dem div 'morecols'.
Die Aufschrift wurde auf alle Etiketten aufgeklebt und die 3. Aufschrift wird in die angegebene Höhe gebracht.

Hier ist eine aktualisierte Geige: https://jsfiddle.net/b4fucp5x/6/

Quelle

2016-04-25 18:52:36

Awesome! Danke vielmals!! –

Sie können meine Antwort upvote, wenn es Ihnen geholfen hat. –

Ich habe noch nicht genug Ruf, um es zu halten .. –

Verwandte Themen