關(guān)于table-row table-cell_html/css_WEB-ITnose
Jun 24, 2016 am 11:39 AM
I recently helped a friend build a website. Since I have no practical experience, I can only learn while doing it. The page is very simple, HTML CSS, and finally uses CSS table layout in the body. Please see the code below.
The red part in the picture is two table-cells, placed inside a table-row. What confuses me is that the width of the cell cannot be adjusted. Using the border attribute has no effect at all. I don't know why. Please help me figure out where this problem lies.
I have never made a website before and I am in a hurry, so the code is a bit messy. Seniors, please work hard and help me figure out how to control the width of the columns. Thanks in advance!
<!doctype html><html><body> <head> <title> XX典藏官網(wǎng)-第四套人民幣收藏網(wǎng),第三套人民幣收藏,第五套人民幣,連體鈔,紀(jì)念鈔,人民幣最新價(jià)格行情表及圖片</title> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <meta name="baidu-site-verification" content="f8zIsHw8jjfPFf3L" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content=" 人民幣收藏,第四套人民幣,第五套人民幣,人民幣價(jià)格,人民幣收藏網(wǎng),人民幣收藏價(jià)格表,人民幣收藏行情,第二套人民幣,第四套人民幣價(jià)格及圖片,第三套人民幣,第三套人民幣價(jià)格及圖片,第四套人民幣大全套,第五套人民幣價(jià)格表,紀(jì)念鈔,奧運(yùn)紀(jì)念鈔最新價(jià)格,金銀幣價(jià)格,連體鈔價(jià)格及圖片"> <link rel="stylesheet" type="text/css" href="css/style_main.css" /> </head> <body> <div id="table_body"> <!--頁(yè)眉--> <div id="row_shuimo"> <div id="header_shuimo"><img src="./images/header_shuimo.png" width=""/></div> </div> <div id="row_nav"> <div id="header_logo"> <a href="http://www.baidu.com/" alt="XX文化藝術(shù)公司"><img src="./images/src_logo.jpg" alt="XX典藏歡迎您"/></a> </div> <div id="header_reg_login"> <a href="http://www.baidu.com/" title="點(diǎn)擊登錄">登錄 </a> <a href="http://www.baidu.com/" title="點(diǎn)擊注冊(cè)">新用戶(hù)?注冊(cè)</a> </div> </div> <!--導(dǎo)航條和商品展示區(qū)--> <!--行--> <div id="row_show"> <div id="cell_list"> <ul> <li id="li_nav_all"><strong>全部藏品分類(lèi)</strong></li> <li id="li_nav_rmb">人民幣收藏</li> <li id="li_nav_stamp">郵票收藏</li> <li id="li_nav_jinianbi">紀(jì)念幣收藏</li> <li id="li_nav_lianti">連體收藏類(lèi)</li> <li id="li_nav_jinyinbi">金銀幣類(lèi)</li> <li id="li_nav_antique">古玩字畫(huà)</li> </ul> </div> <!-- 行 --> <div id="cell_goods"> <div id="goods_table"> <div id="goods_row1"> <div id="cell_row1"> <ul> <li> 您的當(dāng)前位置：首頁(yè) </li> <li> 藏品展示區(qū) </li> </ul> </div> </div> <div id="goods_row2"> <p>goods </p> </div> </div> </div> </div> <!--頁(yè)腳--> <div id="row_footer"> <div class="footer_div" id="footer_400"> <h3>咨詢(xún)熱線(xiàn)</h3> <p>400-000-0000</p> </div> <div class="footer_div"> <ul class="footer_ul"> <li>關(guān)于我們</li> <li><a href="footer/1.html">XX典藏簡(jiǎn)介</a></li> <li><a href="footer/1.html">企業(yè)文化</a></li> <li><a href="footer/1.html">招商與合作</a></li> </ul> </div> <div class="footer_div"> <ul class="footer_ul"> <li>交易指南</li> <li><a href="footer/1.html">購(gòu)物流程</a></li> <li><a href="footer/1.html">免責(zé)聲明</a></li> </ul> </div> <div class="footer_div"> <ul class="footer_ul"> <li>支付配送</li> <li><a href="footer/1.html">支付方式</a></li> <li><a href="footer/1.html">商品配送</a></li> <li><a href="footer/1.html">注意事項(xiàng)</a></li> </ul> </div> </div> </div> </body> </html>
Here is style_main.css:
*{margin:0; padding:0;}/*頁(yè)眉*/#header #header_nav ul li{ list-style-type:none; float:right; }#table_body{ display:table; margin-left:auto; margin-right:auto;}#table_body #row_shuimo{ display:table-row; height:100px; text-align:center;}#table_body #row_shuimo #header_shuimo{ display:table-cell; }#table_body #row_nav{ display:table-row; vertical-align:top;}#table_body #row_nav #header_logo{ display:table-cell; width:300px;}#table_body #row_nav #header_reg_login{ display:table-cell;}/*展示部分*/#table_body #row_show{ display:table-row; height:700px;}#table_body #row_show #cell_list{ display:table-cell; border:solid,20px,#cc0; border-radius:15px; border-color:green;}#table_body #row_show #cell_goods{ display:table-cell;}#cell_list ul{ list-style-type:none; width:130px; /*color:purple; */ background-color:white; border-style:solid; border-top-left-radius:10px; /*border-color:Red;*/ border-width:2px; padding:0px; /*float:left;*/}#table_body #row_show #cell_list ul li{ height:30px; font-size:15px; color:orange; text-align:center; border-style:solid;}#table_body #row_show #cell_list ul #li_nav_all{ color:Orange; background-color:Green; border-top-left-radius:8px; border-top-right-radius:8px;}/*cell_goods*/#goods_table{ display:table; height:inherit;}#goods_row1{ display:table-row;}#goods_row2{ display:table-row;}#cell_row1{ display:table-cell; margin-left:0;}/*頁(yè)腳部分*/ #row_footer{ display:table-row;} .footer_div{ display:table-cell; width:20%; height:100px; float:left;} #row_footer #footer_400{ margin-left:150px;} .footer_ul{ list-style-type:none; margin-left:10px;}
Reply to discussion (solution)
It’s easy to just adjust the width.
#cell_list ul{ width: 500px;} As for the border, I use the Chrom browser and it is displayed.
A few suggestions: 1. Do not put divs in span tags. The tag is used to combine inline elements in the document, usually text;
2. Do not use the id attribute frequently on the page. On the one hand, it is not conducive to code reuse, on the other hand, it is prone to naming conflicts and script errors.
It is easy to just adjust the width,
#cell_list ul{ width: 500px;} As for the border, I use the Chrom browser and it is displayed.
A few suggestions: 1. Do not put divs in span tags. The tag is used to combine inline elements in the document, usually text;
2. Do not use the id attribute frequently on the page. On the one hand, it is not conducive to code reuse, on the other hand, it is prone to naming conflicts and script errors.
Thank you for taking the time to read my code patiently.
The border problem has been solved. It was due to my own CSS syntax error that it could not be displayed. well! But the width problem is still not solved.
Please take a look at the picture below first. 1 and 2 are in one row, 3 and 4 are in one row, and 5 and 6 are in another row. The HTML code has not changed, but no matter how I set the width attributes of table, row and cell in CSS, it has no effect. Don't know why. Paste the image and CSS code below:
*{margin:0; padding:0;}/*頁(yè)眉*/#table_body{ display:table; margin-left:auto; margin-right:auto;}#row_shuimo{ display:table-row; height:100px;}#header_shuimo{ display:table-cell; border:solid; width:200px;}#header_test{display:table-cell;border:solid;}#table_body #row_nav{ display:table-row; width:300px;}#table_body #row_nav #header_logo{ display:table-cell; border:solid 5px red; margin-right:300px; }#table_body #row_nav #header_reg_login{ display:table-cell;}/*展示部分*/#table_body #row_show{ display:table-row; height:700px;}#table_body #row_show #cell_list{ display:table-cell; border-radius:15px; border-color:green; border:solid;}#table_body #row_show #cell_goods{ display:table-cell; border:solid;}#cell_list ul{ list-style-type:none; width:130px; /*color:purple; */ background-color:white; border-style:solid; border-top-left-radius:10px; /*border-color:Red;*/ border-width:2px; padding:0px; /*float:left;*/}#table_body #row_show #cell_list ul li{ height:30px; font-size:15px; color:orange; text-align:center; border-style:solid;}#table_body #row_show #cell_list ul #li_nav_all{ color:Orange; background-color:Green; border-top-left-radius:8px; border-top-right-radius:8px;}/*cell_goods*/#goods_table{ display:table; height:inherit; border:solid;}#goods_row1{ display:table-row;}#goods_row2{ display:table-row;}#cell_row1{ display:table-cell; margin-left:0;}/*頁(yè)腳部分*/ #row_footer{ display:table-row;} .footer_div{ display:table-cell; width:20%; height:100px; float:left;} #row_footer #footer_400{ margin-left:150px;} .footer_ul{ list-style-type:none; margin-left:10px;} Another table-cell is added to HTML, and the id in CSS is header_test
Browser Press F12 to view the elements. Check the id of the element you want to change, and then change the css. As for the problem that width does not take effect, I think it is because the right element is not selected
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How do I stay up-to-date with the latest HTML standards and best practices?
Jun 20, 2025 am 08:33 AM
The key to keep up with HTML standards and best practices is to do it intentionally rather than follow it blindly. First, follow the summary or update logs of official sources such as WHATWG and W3C, understand new tags (such as) and attributes, and use them as references to solve difficult problems; second, subscribe to trusted web development newsletters and blogs, spend 10-15 minutes a week to browse updates, focus on actual use cases rather than just collecting articles; second, use developer tools and linters such as HTMLHint to optimize the code structure through instant feedback; finally, interact with the developer community, share experiences and learn other people's practical skills, so as to continuously improve HTML skills.
How do I use the element to represent the main content of a document?
Jun 19, 2025 pm 11:09 PM
The reason for using tags is to improve the semantic structure and accessibility of web pages, make it easier for screen readers and search engines to understand page content, and allow users to quickly jump to core content. Here are the key points: 1. Each page should contain only one element; 2. It should not include content that is repeated across pages (such as sidebars or footers); 3. It can be used in conjunction with ARIA properties to enhance accessibility. Usually located after and before, it is used to wrap unique page content, such as articles, forms or product details, and should be avoided in, or in; to improve accessibility, aria-labeledby or aria-label can be used to clearly identify parts.
How do I create a basic HTML document?
Jun 19, 2025 pm 11:01 PM
To create a basic HTML document, you first need to understand its basic structure and write code in a standard format. 1. Use the declaration document type at the beginning; 2. Use the tag to wrap the entire content; 3. Include and two main parts in it, which are used to store metadata such as titles, style sheet links, etc., and include user-visible content such as titles, paragraphs, pictures and links; 4. Save the file in .html format and open the viewing effect in the browser; 5. Then you can gradually add more elements to enrich the page content. Follow these steps to quickly build a basic web page.
How do I create checkboxes in HTML using the element?
Jun 19, 2025 pm 11:41 PM
To create an HTML checkbox, use the type attribute to set the element of the checkbox. 1. The basic structure includes id, name and label tags to ensure that clicking text can switch options; 2. Multiple related check boxes should use the same name but different values, and wrap them with fieldset to improve accessibility; 3. Hide native controls when customizing styles and use CSS to design alternative elements while maintaining the complete functions; 4. Ensure availability, pair labels, support keyboard navigation, and avoid relying on only visual prompts. The above steps can help developers correctly implement checkbox components that have both functional and aesthetics.
How do I minimize the size of HTML files?
Jun 24, 2025 am 12:53 AM
To reduce the size of HTML files, you need to clean up redundant code, compress content, and optimize structure. 1. Delete unused tags, comments and extra blanks to reduce volume; 2. Move inline CSS and JavaScript to external files and merge multiple scripts or style blocks; 3. Simplify label syntax without affecting parsing, such as omitting optional closed tags or using short attributes; 4. After cleaning, enable server-side compression technologies such as Gzip or Brotli to further reduce the transmission volume. These steps can significantly improve page loading performance without sacrificing functionality.
How do I use the element to represent the footer of a document or section?
Jun 25, 2025 am 12:57 AM
It is a semantic tag used in HTML5 to define the bottom of the page or content block, usually including copyright information, contact information or navigation links; it can be placed at the bottom of the page or nested in, etc. tags as the end of the block; when using it, you should pay attention to avoid repeated abuse and irrelevant content.
How has HTML evolved over time, and what are the key milestones in its history?
Jun 24, 2025 am 12:54 AM
HTMLhasevolvedsignificantlysinceitscreationtomeetthegrowingdemandsofwebdevelopersandusers.Initiallyasimplemarkuplanguageforsharingdocuments,ithasundergonemajorupdates,includingHTML2.0,whichintroducedforms;HTML3.x,whichaddedvisualenhancementsandlayout
How do I use the tabindex attribute to control the tab order of elements?
Jun 24, 2025 am 12:56 AM
ThetabindexattributecontrolshowelementsreceivefocusviatheTabkey,withthreemainvalues:tabindex="0"addsanelementtothenaturaltaborder,tabindex="-1"allowsprogrammaticfocusonly,andtabindex="n"(positivenumber)setsacustomtabbing
