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