Question

As you can see from the screenshot, when the page is resized (btw, this is a responsive webpage), the table inside it gets overflowed! Tried looking whether there is anywhere else that mentions the width attribute. And also tried to find whether any other tags are missing. But everything seems to be okay and I have been fiddling with this simple layout issue since more than 2 hours now!

This is the live site: <REMOVED URL>

The table is there under the "Features" section.

Any suggestions on where it is causing the issue? I have been fiddling with the css via the developer tools of Google Chrome till now.

enter image description here

EDIT

HTML Code:

<div class="colorblock block priceblock">
    <div id="price" class="block-container">
        <div class="hexagon hexagon-top">
            <div class="outer"></div>
            <div class="inner"><img class="hexagonAndroidImg" src="http://online2shop.net/xbmcbox/wp-content/uploads/2014/04/andriod_logo.png"></div>
        </div>

        <h2 class="title">Features</h2>
        <div class="description"></div>




        <div class="infoblock">



<!--- Added by ABC on 26Apr2014 -->

Specifications <br>

<strong>M8 Android 4.3/Android 4.4 KitKat TV Box Specifications:</strong>
<table class="tblFeatures" style="
    width: 100%;
">
    <tbody>
        <tr>
            <td colspan="2"><strong>Hardware&nbsp;Specifications</strong></td>
        </tr>
        <tr>
            <td>CPU</td>
            <td>Amlogic&nbsp;S802&nbsp;Quad&nbsp;core&nbsp;Cortex&nbsp;A9r4&nbsp;2GHz</td>
        </tr>
        <tr>
            <td>GPU</td>
            <td>Octa-core&nbsp;Mali-450MP&nbsp;GPU&nbsp;@&nbsp;600MHz</td>
        </tr>
        <tr>
            <td>FLASH</td>
            <td>8&nbsp;GB&nbsp;NAND&nbsp;FLASH</td>
        </tr>
        <tr>
            <td>SDRAM</td>
            <td>2GB&nbsp;DDR3</td>
        </tr>
        <tr>
            <td colspan="2"><strong>Power&nbsp;Supply&nbsp;Specifications</strong></td>
        </tr>
        <tr>
            <td>Power&nbsp;Supply</td>
            <td>DC5V/2A</td>
        </tr>
        <tr>
            <td>Power&nbsp;Indicator&nbsp;(LED)</td>
            <td>Power&nbsp;ON&nbsp;:blue;&nbsp;Standby&nbsp;:Red</td>
        </tr>
        <tr>
            <td colspan="2"><strong>Main&nbsp;Features</strong></td>
        </tr>
        <tr>
            <td>OS</td>
            <td>Android&nbsp;4.4&nbsp;KitKat&nbsp;OS</td>
        </tr>
        <tr>
            <td>3D</td>
            <td>Hardward&nbsp;3D&nbsp;graphics&nbsp;acceleration</td>
        </tr>
        <tr>
            <td>Support&nbsp;Decoder&nbsp;format</td>
            <td>HD&nbsp;MPEG1/2/4,H.264,&nbsp;HD&nbsp;AVC/VC-1,RM/RMVB,Xvid/DivX3/4/5/6&nbsp;,RealVideo8/9/10</td>
        </tr>
        <tr>
            <td>Support&nbsp;Media&nbsp;format</td>
            <td>Avi/Rm/Rmvb/Ts/Vob/Mkv/Mov/ISO/wmv/asf/flv/dat/mpg/mpeg</td>
        </tr>
        <tr>
            <td>Support&nbsp;Music&nbsp;format</td>
            <td>MP3/WMA/AAC/WAV/OGG/AC3/DDP/TrueHD/DTS/DTS/HD/FLAC/APE</td>
        </tr>
        <tr>
            <td>Support&nbsp;Photo&nbsp;format</td>
            <td>HD&nbsp;JPEG/BMP/GIF/PNG/TIFF</td>
        </tr>
        <tr>
            <td>USB&nbsp;host</td>
            <td>2High&nbsp;speed&nbsp;USB&nbsp;2.0,support&nbsp;USB&nbsp;DISK&nbsp;and&nbsp;USB&nbsp;HDD</td>
        </tr>
        <tr>
            <td>Card&nbsp;reader</td>
            <td>SD/SDHC/MMC&nbsp;cards</td>
        </tr>
        <tr>
            <td>HDD&nbsp;file&nbsp;system</td>
            <td>FAT16/FAT32/NTFS</td>
        </tr>
        <tr>
            <td>Support&nbsp;Subtitle</td>
            <td>SRT/SMI/SUB/SSA/IDX+USB</td>
        </tr>
        <tr>
            <td>High&nbsp;Difinition&nbsp;video&nbsp;output</td>
            <td>SD/HD&nbsp;max.1920x1080&nbsp;pixel</td>
        </tr>
        <tr>
            <td>OSD&nbsp;type&nbsp;of&nbsp;languages</td>
            <td>English/French/German/Spanish/Italian/&nbsp;etc&nbsp;multilateral&nbsp;languages</td>
        </tr>
        <tr>
            <td>LAN</td>
            <td>Ethernet:10/100M,&nbsp;standard&nbsp;RJ-45</td>
        </tr>
        <tr>
            <td>Wireless</td>
            <td>Built&nbsp;in&nbsp;WiFi</td>
        </tr>
        <tr>
            <td>Mouse/&nbsp;Keyboard</td>
            <td>
                Support&nbsp;mouse&nbsp;and&nbsp;keyboard&nbsp;via&nbsp;USB;
                Support&nbsp;2.4GHz/5GHZ wireless&nbsp;mouse&nbsp;and&nbsp;keyboard&nbsp;via&nbsp;2.4GHz&nbsp;USB&nbsp;dongle
            </td>
        </tr>
        <tr>
            <td>HDMI</td>
            <td>HDMI&nbsp;1.4&nbsp;up&nbsp;to&nbsp;4K2K</td>
        </tr>
        <tr>
            <td>AV</td>
            <td>AV</td>
        </tr>
        <tr>
            <td>3G</td>
            <td>Support</td>
        </tr>
        <tr>
            <td>DOLBY&nbsp;TrueHD&nbsp;and&nbsp;DTS&nbsp;HD</td>
            <td>DOLBY&nbsp;TrueHD&nbsp;and&nbsp;DTS&nbsp;HD&nbsp;Bypass&nbsp;through&nbsp;HDMI</td>
        </tr>
        <tr>
            <td colspan="2"><strong>Software&nbsp;Specifications</strong></td>
        </tr>
        <tr>
            <td>Network&nbsp;Function</td>
            <td>Skype&nbsp;chatting,Picasa,Youtube,Flicker,Facebook,Online&nbsp;movies,etc</td>
        </tr>
        <tr>
            <td>Other&nbsp;feature</td>
            <td>Free&nbsp;Internet&nbsp;searching,thousands&nbsp;of&nbsp;android&nbsp;applications,many&nbsp;kinds&nbsp;of&nbsp;games,etc.</td>
        </tr>
    </tbody>
</table>
<br style="color: #222222;">
<strong style="color: #222222;">M8 Android 4.3/Android 4.4 KitKat TV Box Package Contains:</strong><br style="color: #222222;"><br style="color: #222222;">
<ul style="color: #222222;">
    <li>HDMI Cable*1</li>
    <li>USB Cable*1</li>
    <li>Manual*1</li>
    <li>AV Cable*1</li>
    <li>Adapter*1</li>
</ul>




                    </div>
    </div>
</div>

CSS :

.tblFeatures td{ border-color: #1DB6B6; padding-top: 5px; padding-bottom: 5px;}
.priceblock .block-container .infoblock {
float: none;
width: 100%;
margin-left: 0px;
}

.priceblock .block-container .infoblock {
float: none;
width: 100%;
margin-left: 0px;
}

.block {
float: left;
width: 100%;
position: relative;
padding: 0 0 100px 0;
}
Was it helpful?

Solution

<td>Amlogic&nbsp;S802&nbsp;Quad&nbsp;core&nbsp;Cortex&nbsp;A9r

&nbsp; is called non breaking space for a reason. It prevents the line from breaking. If you want the text to adapt to the table's width you have to get rid of them.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top