CODEWITHSUNDEEP
htmlcss
Jimmy Lin
Jimmy Lin

Reputation: 1501

Nested table's wide is not changeable

I am having troubles when changing the wide in nested table. 

<table width="80%" id="parent">
<tbody>
     <tr>
         <th>
             <table id="samples">
                 <tbody>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 </tbody>
             </table>
         </th>
         <th>
             Screenshot
         </th>
     </tr>
 </tbody>

I'd like to make table samples's wide as wider as the first th in the parent, but I can't do that.

I use CSS to set the width argument, and the full code is :

jsfiddle.net

Upvotes: 0

Views: 49

Answers (2)

TimSPQR
TimSPQR

Reputation: 2984

Here's a FIDDLE to think about- everything in divs.

HTML

<div id='holderdiv'>
  <div id='scrolldiv'>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
  </div>
  <div id='screendiv'>Screenshot</div>
  </div>
</div>

Upvotes: 0

misterManSam
misterManSam

Reputation: 24702

I don't know exactly what result you are trying to achieve, but would something like this be a nicer, simpler alternative?

Have a fiddle! - Fiddle link!

HTML

<div id="samplesParent">
    <table id="samples">
        <tbody>
            <tr>
                <td>sample_path_01</td>
                <td>tagging</td>
            </tr>
    <!-- to infinity -->
        </tbody>
    </table>
</div>
<div>Screenshot</div>

CSS

#samplesParent {
    float: left;
    width: 300px;
    height: 200px;
    overflow-y: scroll;
}

#samples {
    width: 100%;
}

Upvotes: 1

Related Questions