Layout problem

I don’t see how that can line up anyway as its a different size and the vertical alignment is not the same as the other layout. You’d need to increase the width of the container and apply new styles to that element to line it up.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script> $(document).ready(function() { $('.draggable').draggable({helper: 'clone'}); $('.droppable').droppable({ drop: function(event, ui) { var dest = $(this).find('img').attr('src'); var hidden1=$(this).find('[name^="position"]').attr('value'); alert("Hidden 1 : "+hidden1+$(this).find('[name^="position"]').attr('name')); var source = ui.helper.attr('src'); $(this).html('<span><span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/newSet/tyre2.png" ><input type=hidden id="positionR11" name="positionR11" value="R11"><input type=hidden name="tyreIDR11" value="1"></span> '); ui.draggable.parent().html('<span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/newSet/tyre2.png" ><input type=hidden id="positionR12" name="positionR12" value="R12"><input type=hidden name="tyreIDR11" value="1"></span> '); $('.draggable').draggable({helper: 'clone'}); addRows(); } }); function addRows() { alert("TEST"); //$('#positionR11').val('45'); var thisName = '#positionR11'; $(thisName).val('78'); $("#dynamicRow").find('tbody').append('<tr><td>t</td><td>t</td><td>t</td><td>t</td><td><button class="remove">Remove</button> </tr>'); alert($('#positionR11').val()); } $("table.dynatable button.remove").live("click", function() { alert("TEST"); $(this).closest("tr").remove(); if ($('table.dynatable tbody tr', form).length > 2) { var form = this.form; $(this).closest("tr").remove(); } }); }); </script>
<style type="text/css">
.tyres {
[B]/* width removed */ [/B]  
 float:left;
}
.tyres span {
    display:inline-block;
    position:relative;
    vertical-align:center
}
.tyres b {
    position:absolute;
    bottom:20px;
    left:2px;
    width:30px;
    color:#fff;
}
.t1 img {
    display:block
}
.t1 .mid {
    vertical-align:bottom
}
.t1 {
    clear:both;
    overflow:hidden;
    word-spacing:-.25em; /* hide whitespace nodes*/
    display:table;
   [B] width:400px;[/B]
}
.t1 * {
    word-spacing:0;
}
[B].t2{width:600px;}
.t2 .mid{vertical-align:top;margin-top:22px}[/B]

[B].dynatable{clear:both}[/B]
</style>
</head>
<body>
<div class="tyres">
    <div class="[B]t1 t2"[/B]> <span class="droppable"><b>R11</b> <img class="draggable" src="http://183.78.169.53/tyre2/newSet/tyre2.png" >
        <input type=hidden id="positionR12" name="positionR11" value="R11">
        <input type=hidden name="tyreIDR11" value="1">
        </span> 
        <span class="mid"><img src="http://183.78.169.53/tyre2/newSet/longJoin.png"></span> <span class="droppable"><b>R11</b> <img class="draggable" src="http://183.78.169.53/tyre2/newSet/tyre2.png" >
        <input type=hidden id="positionR11" name="positionR11" value="R11">
        <input type=hidden name="tyreIDR11" value="1">
        </span> </div>
    <div class="t1"><span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/newSet/tyre2.png" ></span><span class="mid"><img src="http://183.78.169.53/tyre2/centerLongJoinFirstAxle.png" ></span><span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span></div>
    <div class="t1"><span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/newSet/tyre2.png" ></span><span class="mid"><img width="39" height="36" src="http://183.78.169.53/tyre2/shortJoin.png"></span><span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span><span class="mid"><img src="http://183.78.169.53/tyre2/centerJoinLastAxle.png" ></span><span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span><span class="mid"><img width="39" height="36" src="http://183.78.169.53/tyre2/shortJoin.png"></span><span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span></div>
</div>
<div>
    <table class="dynatable" id="dynamicRow">
        <thead>
            <tr>
                <th>From</th>
                <th>To</th>
                <th>Serial From</th>
                <th>Serial To</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
</body>
</html>


I don’t really understand what that new element has got to do with the things that we’ve been working on already. You won’t be able to make the code adjust automatically to unknown elements of varying size. There needs to be some consistency in the approach so that it can all fit together.

Dear Paul,
Sorry about the new image. I was just testing it out how it if I change to a new different images. I will consult your next time. Thank you.

Dear Paul,
I am in the midst of moving from basic html to pure php where the layout will now be generated dynamically. I tried your same code for some example here http://183.78.169.53/tm/viewVehicleLayout.php?vehicleLayoutID=1. I only added additional <font size=‘2’><b>$loPosition</b> this font size but yet is still too big. Can you see why my layout have run.

Below is part of php codes to generate it dynamically.

while($row1 = mysqli_fetch_array($result1, MYSQL_ASSOC))
{
$count++;

$loID = $row1[‘loID’];
$roID = $row1[‘roID’];
$liID = $row1[‘liID’];
$riID = $row1[‘riID’];
$loPosition = $row1[‘loPosition’];
$roPosition = $row1[‘roPosition’];
$liPosition = $row1[‘liPosition’];
$riPosition = $row1[‘riPosition’];

$axleExist = $row1[‘axleExist’];

if($count==1)
{
if($liID>0 && $riID>0)
{

 }
 else
 {
 	 echo "&lt;div class='t1'&gt;";
 	 echo "&lt;span class='droppable'&gt;&lt;font size='2'&gt;&lt;b&gt;$loPosition&lt;/b&gt;&lt;/font&gt;";    		
   echo "&lt;img class='draggable' src='tyreImages/tyre2.png' &gt;";    	
   echo "&lt;/span&gt;";	
   
   echo "&lt;span class='mid'&gt;&lt;img src='tyreImages/longJoin1.png'&gt;&lt;/span&gt;";
   
   echo "&lt;span class='droppable'&gt;&lt;font SIZE='2'&gt;&lt;b&gt;$roPosition&lt;/b&gt;&lt;/font&gt;";    		
   echo "&lt;img class='draggable' src='tyreImages/tyre2.png'&gt;";    	
   echo "&lt;/span&gt;";	
   echo "&lt;/div&gt;";

}
}
else
{
echo “<div class=‘t1’>”;

  echo "&lt;span&gt;&lt;font size='2'&gt;&lt;b&gt;$loPosition&lt;/b&gt;&lt;/font&gt;";
  echo "&lt;img class='draggable' src='tyreImages/tyre2.png' &gt;";
  echo "&lt;/span&gt;";
  
  echo "&lt;span class='mid'&gt;";
  echo "&lt;img width='39' height='36' src='tyreImages/shortJoin.png'&gt;";
  echo "&lt;/span&gt;";
  
  echo "&lt;span&gt;&lt;font size='2'&gt;&lt;b&gt;$liPosition&lt;/b&gt;&lt;/font&gt;";
  echo "&lt;img class='draggable' src='tyreImages/tyre2.png'&gt;";
  echo "&lt;/span&gt;";
  
  echo "&lt;span class='mid'&gt;";
  echo "&lt;img src='tyreImages/centerJoinLastAxle.png' &gt;";
  echo "&lt;/span&gt;";
 

  echo "&lt;span&gt;&lt;font size='2'&gt;&lt;b&gt;$riPosition&lt;/b&gt;&lt;/font&gt;";
  echo "&lt;img class='draggable' src='tyreImages/tyre2.png' &gt;";
  echo "&lt;/span&gt;";
  
  echo "&lt;span class='mid'&gt;";
  echo "&lt;img width='39' height='36' src='tyreImages/shortJoin.png'&gt;";
  echo "&lt;/span&gt;";
  
  echo "&lt;span&gt;&lt;font size='2'&gt;&lt;b&gt;$roPosition&lt;/b&gt;&lt;/font&gt;";
  echo "&lt;img class='draggable' src='tyreImages/tyre2.png' &gt;";
  echo "&lt;/span&gt;";
  
  echo "&lt;/div&gt;";

}
}?>
</div>

The first thing to do is to remove all the font tags. You will never ever use a font tag again. They were consigned to the last century and should never be used.

Use CSS and set the font-size of the b element as required.


.tyres b {
    position:absolute;
    bottom:20px;
    left:2px;
    width:30px;
    color:#fff;
[B]    font-size:110%;/* adjust to suit*/[/B]
}


If that doesn’t solve the problem then I’ll take another look.

Dear Paul,
I have newlink here http://183.78.169.53/tyre2/newSet/table1.html. Here the tyre image is remove with the tyre information I have put it into a tabel. Can you comment if I have done properly because in some browswer like chrome there is some space gap between the row1 and row2. Thank you.

Hi,

That seems to be corrupted in Firefox as you have some strange characters before the doctype and the browser just renders the source code.

I’d probably need to start all over again as you have changed the dynamics with the tables interspersed everywhere. A span cannot hold a table anyway and the spans would all need to be converted to divs instead.

This seems to work but is probably white-space critical again.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script> $(document).ready(function() { $('.draggable').draggable({helper: 'clone'}); $('.droppable').droppable({ drop: function(event, ui) { var dest = $(this).find('img').attr('src'); var hidden1=$(this).find('[name^="position"]').attr('value'); alert("Hidden 1 : "+hidden1+$(this).find('[name^="position"]').attr('name')); var source = ui.helper.attr('src'); $(this).html('<div><div><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/newSet/tyre2.png" ><input type=hidden id="positionR11" name="positionR11" value="R11"><input type=hidden name="tyreIDR11" value="1"></div> '); ui.draggable.parent().html('<div><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/newSet/tyre2.png" ><input type=hidden id="positionR12" name="positionR12" value="R12"><input type=hidden name="tyreIDR11" value="1"></div> '); $('.draggable').draggable({helper: 'clone'}); addRows(); } }); function addRows() { alert("TEST"); //$('#positionR11').val('45'); var thisName = '#positionR11'; $(thisName).val('78'); $("#dynamicRow").find('tbody').append('<tr><td>t</td><td>t</td><td>t</td><td>t</td><td><button class="remove">Remove</button> </tr>'); alert($('#positionR11').val()); } $("table.dynatable button.remove").live("click", function() { alert("TEST"); $(this).closest("tr").remove(); if ($('table.dynatable tbody tr', form).length > 2) { var form = this.form; $(this).closest("tr").remove(); } }); }); </script>
<style type="text/css">
* {
    margin:0;
    padding:0
}
.tyres {
    float:left;
    text-align:center
}
.tyres div {
    display:inline-block;
    position:relative;
    vertical-align:center
}
* html .tyres div {display:inline}
*+html .tyres div {display:inline}
.tyres b {
    position:absolute;
    bottom:20px;
    left:2px;
    width:30px;
    color:red;
}
.t1 img {
    display:block
}
.t1 .mid {
    vertical-align:bottom
}
.t1 {
    clear:both;
    overflow:hidden;
    word-spacing:-.25em; /* hide whitespace nodes*/
    display:table;
    width:100%;
    vertical-align:bottom;
}
.t1 * {
    word-spacing:0;
}
.tyres table{overflow:hidden;table-layout:fixed}
.table1{width:300px;}
.table2{width:170px;}
</style>
</head>
<body>
<div class="tyres">
    <div class="t1">
        <div class="droppable">
            <table class="table1">
                <tr>
                    <td>Tyre Brand</td>
                    <td>GY</td>
                </tr>
                <tr>
                    <td>Tyre Serial</td>
                    <td>1234567890</td>
                </tr>
                <tr>
                    <td>Tyre Pattern</td>
                    <td>RHS 232332</td>
                </tr>
            </table>
        </div>
        <div class="mid"><img src="http://183.78.169.53/tyre2/newSet/longJoin1.png"></div>
        <div class="droppable">
            <table class="table1">
                <tr>
                    <td>Tyre Brand</td>
                    <td>GY</td>
                </tr>
                <tr>
                    <td>Tyre Serial</td>
                    <td>1234567890</td>
                </tr>
                <tr>
                    <td>Tyre Pattern</td>
                    <td>RHS 232332</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="t1">
        <div>
            <table class="table2" cellspacing="0" cellpadding="0">
                <tr>
                    <td>Tyre Brand</td>
                    <td>GY</td>
                </tr>
                <tr>
                    <td>Tyre Serial</td>
                    <td>1234567890</td>
                </tr>
                <tr>
                    <td>Tyre Pattern</td>
                    <td>RHS 232332</td>
                </tr>
            </table>
        </div>
        <div class="mid"><img width="39" height="36" src="http://183.78.169.53/tyre2/newSet/shortJoin.png"></div>
        <div>
            <table class="table2" width="170" cellspacing="0" cellpadding="0" >
                <tr></tr>
                    <td>Tyre Brand</td>
                    <td>GY</td>
                </tr>
                <tr>
                    <td>Tyre Serial</td>
                    <td>1234567890</td>
                </tr>
                <tr>
                    <td>Tyre Pattern</td>
                    <td>RHS 232332</td>
                </tr>
            </table>
        </div>
        <div class="mid"><img src="http://183.78.169.53/tyre2/newSet/centerJoinLastAxle.png" ></div>
        <div>
            <table class="table2" cellspacing="0" cellpadding="0">
                <tr>
                    <td>Tyre Brand</td>
                    <td>GY</td>
                </tr>
                <tr>
                    <td>Tyre Serial</td>
                    <td>1234567890</td>
                </tr>
                <tr>
                    <td>Tyre Pattern</td>
                    <td>RHS 232332</td>
                </tr>
            </table>
        </div>
        <div class="mid"><img width="39" height="36" src="http://183.78.169.53/tyre2/newSet/shortJoin.png"></div>
        <div>
            <table class="table2" cellspacing="0" cellpadding="0" >
                <tr>
                    <td>Tyre Brand</td>
                    <td>GY</td>
                </tr>
                <tr>
                    <td>Tyre Serial</td>
                    <td>1234567890</td>
                </tr>
                <tr>
                    <td>Tyre Pattern</td>
                    <td>RHS 232332</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div>
    <table class="dynatable" id="dynamicRow">
        <thead>
            <tr>
                <th>From</th>
                <th>To</th>
                <th>Serial From</th>
                <th>Serial To</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
</body>
</html>


Dear Paul,
I have tried your method and the page is here Untitled Document. The problem if you compare this page looks all fine http://183.78.169.53/tyre2/newSet/table1.html. What changes must I do the div method. Thank you.

Sorry, I’m a bit confused as to what you are asking.

The version I gave converted the spans to divs and tidied up the spacing a bit and adjusted the code to suit and is working fine as shown by your demo page. Your other version is not working at all in Firefox because of the errors I mentioned before and in Chrome/safari has a gap.

What’s wrong with the working version?

Dear Paul,
The version you change is here Untitled Document but you notice all the images in blue color which are connector are not in proper place compare to the one in this link http://183.78.169.53/tyre2/newSet/table1.html. So how to make the images all look algin well. Thank you.

Dear Paul,
I have checked the page Untitled Document works well in Chrome and Firefox but only in IE it have the problem. Next thing I would also like to ask how to make the words Tyre Brand, Tyre Serial and Tyre Pattern properly align.

That second link still isn’t working in Firefox so I can’t look at it in Firefox until you fix it (I have mentioned this several times now so track back and find the reason).

The first link seems to be fine in chrome whereas your second link looks broken in chrome so I am at a loss as to what you really mean.:slight_smile:

Dear Paul,
Ok I have repaired the first link Untitled Document and it works well on Firefox. Can you now compare my link with [url=http://183.78.169.53/tyre2/newSet/table2.html]Untitled Document in IE? Then you will notice what I am trying to tell you.

IE8 was fine but IE6 was out. I guess assumed IE6 support wasn’t required.

This is about the best I can do as ist is getting more complicated now.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script> $(document).ready(function() 
    { 
        $('.draggable').draggable({helper: 'clone'}); 
        $('.droppable').droppable({ drop: function(event, ui) 
            { var dest = $(this).find('img').attr('src'); 
                var hidden1=$(this).find('[name^="position"]').attr('value'); 
                alert("Hidden 1 : "+hidden1+$(this).find('[name^="position"]').attr('name')); 
                var source = ui.helper.attr('src'); 
                $(this).html('<div><div><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/newSet/tyre2.png" ><input type=hidden id="positionR11" name="positionR11" value="R11"><input type=hidden name="tyreIDR11" value="1"></div> '); 
                ui.draggable.parent().html('<div><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/newSet/tyre2.png" ><input type=hidden id="positionR12" name="positionR12" value="R12"><input type=hidden name="tyreIDR11" value="1"></div> '); $('.draggable').draggable({helper: 'clone'}); addRows(); } }); function addRows() { alert("TEST"); 
                    //$('#positionR11').val('45'); 
                    var thisName = '#positionR11'; 
                    $(thisName).val('78'); 
                    $("#dynamicRow").find('tbody').append('<tr><td>t</td><td>t</td><td>t</td><td>t</td><td><button class="remove">Remove</button> </tr>'); alert($('#positionR11').val()); 
                    } 
                    $("table.dynatable button.remove").live("click", function() 
                    { 
                        alert("TEST"); $(this).closest("tr").remove(); 
                        if ($('table.dynatable tbody tr', form).length > 2) 
                        { 
                            var form = this.form; $(this).closest("tr").remove(); 
                            } 
                    }
                    ); 
                    
        }
    ); 
</script>
<style type="text/css">
.tyres {
    text-align:center;
}
.tyres div div {
    display:inline-block;
    position:relative;
    vertical-align:bottom;
}
* html .tyres div div {
    display:inline
}
*+html .tyres div div {
    display:inline
}
.tyres b {
    position:absolute;
    bottom:20px;
    left:2px;
    width:30px;
    color:#fff;
}
.t1 img {
    display:block
}
.t1 .mid {
    vertical-align:bottom
}
.t1 {
    clear:both;
    overflow:hidden;
    word-spacing:-.25em; /* hide whitespace nodes*/
    display:table;
    width:100%;
}
.t1 * {
    word-spacing:0;
}
.tyres table{overflow:hidden;text-align:left}
td{white-space:nowrap}
</style>
</head>
<body>
<div class="tyres">
    <div class="t1">
        <div class="droppable">
            <table width="300">
                <tr>
                    <td>Tyre Brand</td>
                    <td>GY</td>
                </tr>
                <tr>
                    <td>Tyre Serial</td>
                    <td>1234567890</td>
                </tr>
                <tr>
                    <td>Tyre Pattern</td>
                    <td>RHS 232332</td>
                </tr>
            </table>
        </div>
        <div class="mid"><img src="http://183.78.169.53/tyre2/newSet/longJoin1.png"></div>
        <div class="droppable">
            <table width="300">
                <tr>
                    <td>Tyre Brand</td>
                    <td>GY</td>
                </tr>
                <tr>
                    <td>Tyre Serial</td>
                    <td>1234567890</td>
                </tr>
                <tr>
                    <td>Tyre Pattern</td>
                    <td>RHS 232332</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="t1">
        <div>
            <table width="165">
                <tr>
                    <td>Tyre Brand</td>
                    <td>GY</td>
                </tr>
                <tr>
                    <td>Tyre Serial</td>
                    <td>1234567890</td>
                </tr>
                <tr>
                    <td>Tyre Pattern</td>
                    <td>RHS 232332</td>
                </tr>
            </table>
        </div>
        <div class="mid"><img width="39" height="36" src="http://183.78.169.53/tyre2/newSet/shortJoin.png"></div>
        <div>
            <table width="165" >
                <tr>
                    <td>Tyre Brand</td>
                    <td>GY</td>
                </tr>
                <tr>
                    <td>Tyre Serial</td>
                    <td>1234567890</td>
                </tr>
                <tr>
                    <td>Tyre Pattern</td>
                    <td>RHS 232332</td>
                </tr>
            </table>
        </div>
        <div class="mid"><img src="http://183.78.169.53/tyre2/newSet/centerJoinLastAxle.png" ></div>
        <div>
            <table width="165">
                <tr>
                    <td>Tyre Brand</td>
                    <td>GY</td>
                </tr>
                <tr>
                    <td>Tyre Serial</td>
                    <td>1234567890</td>
                </tr>
                <tr>
                    <td>Tyre Pattern</td>
                    <td>RHS 232332</td>
                </tr>
            </table>
        </div>
        <div class="mid"><img width="39" height="36" src="http://183.78.169.53/tyre2/newSet/shortJoin.png"></div>
        <div>
            <table width="165" >
                <tr>
                    <td>Tyre Brand</td>
                    <td>GY</td>
                </tr>
                <tr>
                    <td>Tyre Serial</td>
                    <td>1234567890</td>
                </tr>
                <tr>
                    <td>Tyre Pattern</td>
                    <td>RHS 232332</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div>
    <table class="dynatable" id="dynamicRow">
        <thead>
            <tr>
                <th>From</th>
                <th>To</th>
                <th>Serial From</th>
                <th>Serial To</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
</body>
</html>


Dear Paul,
What are the key changes you have done? It works well now in IE 7. I think lets forget about IE 6 is outdated though.

lol - I got lost with the changes which is why I didn’t highlight them. :slight_smile: I was fiddling for hours to find a combination that worked. I believe I changed the table properties, added white-space: nowrap and also made sure I targeted the inner divs:


* html .tyres div div

I also removed the space before and after the image tags and hopefully the above is working ok in IE6 also (at least it was last night when I tested it).

Dear Paul,
Yes it works perfectly fine so I am learning on my own what changes you have done to create the perfect piece. I really admire your skils as you really know the exactly solution with all the mix up of the solutions. I need to really learn those stuff from you.

Dear Paul,
Here is my latest link Untitled Document. If you notice the first row the data on the left have some gap with connector. Where as the data on the right have now gap? How to over come this?

Dear Paul,
Another question I tried to remove this div <div class=“droppable”> and the whole goes wrong. How if I dont no need this div what changes must I do the styles?

You can’t remove that div as it is used for the structure. You can remove the class but the element itself is being targeted via the rules ending in div div.

That gap on the right is simply because the text doesn’t go to the full width of the 300px table. If you had more text then it would reach the connector.

It is unlikely that you will always have the same amount of text on each size so you can’t control that space.

Maybe shorten the width a bit (200px) and then add some padding to the table cells.


.tyres td {
white-space:nowrap;
  padding:0 10px;
}