คำถามติดแท็ก html-table

ในตาราง HTML cellpaddingและcellspacingสามารถตั้งค่าดังนี้: <table cellspacing="1" cellpadding="1"> วิธีเดียวกันสามารถทำได้โดยใช้ CSS?

3317 html  css  html-table  alignment 

วิธีที่ดีที่สุดใน jQuery คือการเพิ่มแถวเพิ่มเติมลงในตารางเป็นแถวสุดท้าย เป็นที่ยอมรับหรือไม่? $('#myTable').append('<tr><td>my data</td><td>more data</td></tr>'); มีข้อ จำกัด เกี่ยวกับสิ่งที่คุณสามารถเพิ่มลงในตารางเช่นนี้ (เช่นอินพุตเลือกจำนวนแถว) หรือไม่

2425 javascript  jquery  html-table 

ฉันกำลังทำงานกับเว็บแอปพลิเคชันที่ฉันต้องการให้เนื้อหาเต็มความสูงของหน้าจอ หน้ามีส่วนหัวซึ่งมีโลโก้และข้อมูลบัญชี นี่อาจเป็นความสูงตามอำเภอใจ ฉันต้องการให้ div เนื้อหาเติมส่วนที่เหลือของหน้าลงไปด้านล่าง ฉันมีส่วนหัวและเนื้อหาdiv divในขณะนี้ฉันใช้ตารางสำหรับเค้าโครงดังนี้: CSS และ HTML #page { height: 100%; width: 100% } #tdcontent { height: 100%; } #content { overflow: auto; /* or overflow: hidden; */ } <table id="page"> <tr> <td id="tdheader"> <div id="header">...</div> </td> </tr> <tr> <td id="tdcontent"> <div id="content">...</div> </td> </tr> </table> …

1910 html  css  html-table 

เรามี<tbody>แท็กหลายแท็กเหมือนกันได้<table>ไหม ถ้าใช่แล้วในสถานการณ์ใดที่เราควรใช้หลาย<tbody>แท็ก

594 html  html-table  xhtml 

ฉันใช้คำword-wrap: break-wordสั่งตัดคำในdivs และspans อย่างไรก็ตามดูเหมือนว่าจะไม่ทำงานในเซลล์ตาราง ฉันมีตารางตั้งค่าwidth:100%โดยมีหนึ่งแถวและสองคอลัมน์ ข้อความในคอลัมน์แม้ว่าจะมีสไตล์ด้านบนword-wrapแต่ก็ไม่ได้ห่อ ทำให้ข้อความผ่านขอบเขตของเซลล์ สิ่งนี้เกิดขึ้นกับ Firefox, Google Chrome และ Internet Explorer นี่คือลักษณะที่มา: td { border: 1px solid; } <table style="width: 100%;"> <tr> <td> <div style="word-wrap: break-word;"> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word </div> </td> <td><span style="display: inline;">Short word</span></td> </tr> </table> เรียกใช้ข้อมูลโค้ดHide resultsขยายตัวอย่างข้อมูล คำที่ยาวด้านบนมีขนาดใหญ่กว่าขอบเขตของหน้าเว็บของฉัน แต่ไม่ได้ตัดกับ HTML ด้านบน ฉันลองทำตามคำแนะนำด้านล่างเพื่อเพิ่มtext-wrap:suppressและtext-wrap:normalแต่ก็ไม่ได้ช่วยอะไร

566 html  css  html-table 

รูปแบบง่าย ๆ : <tr class="something"> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> <td>ฉันจำเป็นต้องตั้งค่าความกว้างคงที่สำหรับ ฉันได้พยายาม: tr.something { td { width: 90px; } } ด้วย td.something { width: 90px; } สำหรับ <td class="something">B</td> และแม้กระทั่ง <td style="width: 90px;">B</td> แต่ความกว้างของ<td>ยังคงเหมือนเดิม

513 css  twitter-bootstrap  width  html-table 

ฉันกำลังใช้ตารางที่มีสีแถวสำรองด้วยสิ่งนี้ tr.d0 td { background-color: #CC9999; color: black; } tr.d1 td { background-color: #9999CC; color: black; } <table> <tr class="d0"> <td>One</td> <td>one</td> </tr> <tr class="d1"> <td>Two</td> <td>two</td> </tr> </table> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล นี่ฉันใช้ชั้นแต่ผมต้องการที่จะใช้เฉพาะสำหรับtr tableเมื่อฉันใช้ชั้นเรียนสำหรับตารางกว่านี้นำไปใช้เป็นtrทางเลือก ฉันสามารถเขียน HTML แบบนี้โดยใช้ CSS ได้ไหม <table class="alternate_color"> <tr><td>One</td><td>one</td></tr> <tr><td>Two</td><td>two</td></tr> </table> ฉันจะทำให้แถวมี "ลายทางม้าลาย" โดยใช้ CSS ได้อย่างไร

462 html  css  html-table 

ฉันมีสอง divs เคียงข้างกัน ฉันต้องการความสูงของพวกเขาที่จะเหมือนกันและอยู่ในระดับเดียวกันหากหนึ่งในนั้นปรับขนาด ฉันไม่สามารถคิดออกนี้ ไอเดีย? เพื่อชี้แจงคำถามที่สับสนของฉันฉันต้องการให้ทั้งสองกล่องมีขนาดเท่ากันเสมอดังนั้นหากหนึ่งกล่องโตขึ้นเนื่องจากมีการใส่ข้อความไว้อีกกล่องควรจะตรงกับความสูง <div style="overflow: hidden"> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> </div> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content! </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

441 html  css  html-table  flexbox 

ฉันใช้ Bootstrap และสิ่งต่อไปนี้ใช้ไม่ได้: <tbody> <a href="#"> <tr> <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td> </tr> </a> </tbody>

436 html  html-table  bootstrap-4 

ฉันมีตารางขนาด 3 คูณ 3 ฉันต้องการวิธีเพิ่มเส้นขอบที่ด้านล่างของทุกแถวtrและให้สีเฉพาะ ก่อนอื่นฉันลองวิธีที่ตรงคือ: <tr style="border-bottom:1pt solid black;"> แต่นั่นไม่ได้ผล ดังนั้นฉันจึงเพิ่ม CSS เช่นนี้: tr { border-bottom: 1pt solid black; } ยังไม่ได้ผล ฉันต้องการใช้ CSS เพราะฉันไม่ต้องการเพิ่มstyleคุณสมบัติให้กับทุกแถว ฉันยังไม่ได้เพิ่มแอตทริบิวต์ไปborder <table>ฉันหวังว่านั่นจะไม่ส่งผลกระทบต่อ CSS ของฉัน

385 html  css  html-table 

ฉันจะระบุtdแท็กควรครอบคลุมทุกคอลัมน์ได้อย่างไร (เมื่อจำนวนคอลัมน์ที่แน่นอนในตารางจะแปรผัน / ยากที่จะกำหนดว่า HTML จะแสดงผลอย่างไร) w3schoolsกล่าวถึงคุณสามารถใช้colspan="0"แต่ไม่ได้บอกว่าเบราว์เซอร์ใดที่สนับสนุนค่านั้น (IE 6 อยู่ในรายการของเราเพื่อสนับสนุน) มันจะปรากฏขึ้นการตั้งค่าที่colspanจะเป็นใหญ่มูลค่ากว่ามูลค่าทางทฤษฎีของคอลัมน์ที่คุณอาจจะมีจะทำงาน แต่มันจะไม่ทำงานหากคุณมีการตั้งค่าให้table-layout fixedมีข้อเสียในการใช้เลย์เอาต์อัตโนมัติที่มีจำนวนมากcolspanหรือไม่? มีวิธีที่ถูกต้องมากขึ้นในการทำเช่นนี้?

385 html  html-table  tablelayout 

แก้ไข - ชื่อเรื่อง:มีทางเลือกในการประสบความสำเร็จborder-collapse:collapseในCSS(ในการสั่งซื้อที่จะมีการยุบตารางมุมโค้งมน)? เนื่องจากปรากฎว่าการทำให้เส้นขอบของตารางยุบลงไม่สามารถแก้ปัญหารากได้ฉันจึงอัปเดตชื่อเพื่อให้สะท้อนการอภิปรายได้ดียิ่งขึ้น ฉันกำลังพยายามทำตารางที่มีมุมโค้งมนโดยใช้CSS3 border-radiusคุณสมบัติ รูปแบบตารางที่ฉันใช้มีลักษณะดังนี้: table { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px } นี่คือปัญหา ฉันต้องการตั้งค่าborder-collapse:collapseคุณสมบัติและเมื่อชุดนั้นborder-radiusไม่ทำงานอีกต่อไป มีวิธีตาม CSS ที่ฉันสามารถรับผลเช่นเดียวกับที่border-collapse:collapseไม่ใช้จริงหรือไม่ การแก้ไข: ฉันได้ทำหน้าง่าย ๆ เพื่อแสดงปัญหาที่นี่ (Firefox / Safari เท่านั้น) ดูเหมือนว่าปัญหาส่วนใหญ่คือการตั้งค่าตารางให้มีมุมมนไม่ส่งผลต่อมุมของtdองค์ประกอบมุม ถ้าตารางมีสีเดียวทั้งหมดนี่คงไม่ใช่ปัญหาเพราะฉันสามารถสร้างยอดและล่างtdกลมสำหรับแถวแรกและแถวสุดท้ายตามลำดับ อย่างไรก็ตามฉันใช้สีพื้นหลังที่แตกต่างกันสำหรับตารางเพื่อแยกความแตกต่างของส่วนหัวและสำหรับการสตริปดังนั้นtdองค์ประกอบภายในจะแสดงมุมโค้งมนของพวกเขาเช่นกัน สรุปโซลูชั่นที่นำเสนอ: การล้อมรอบโต๊ะด้วยองค์ประกอบอื่นที่มีมุมโค้งมนไม่ได้ผลเพราะมุมสี่เหลี่ยมของตาราง "มีเลือดออก" การระบุความกว้างของเส้นขอบเป็น 0 จะไม่ยุบตาราง tdมุมด้านล่างยังคงเป็นสี่เหลี่ยมจัตุรัสหลังจากกำหนดระยะห่างระหว่างเซลล์เป็นศูนย์ การใช้จาวาสคริปต์แทนทำได้โดยหลีกเลี่ยงปัญหา การแก้ปัญหาที่เป็นไปได้: ตารางถูกสร้างขึ้นใน PHP ดังนั้นฉันสามารถใช้คลาสที่แตกต่างกับแต่ละด้านนอก / tds และสไตล์แต่ละมุมแยกจากกัน ฉันไม่อยากทำสิ่งนี้เนื่องจากมันไม่ได้สวยงามมากและมีความเจ็บปวดเล็กน้อยที่จะนำไปใช้กับหลาย ๆ ตารางดังนั้นโปรดให้คำแนะนำต่อไป วิธีแก้ปัญหาที่เป็นไปได้ 2 คือใช้ …

317 html  css  rounded-corners  html-table 

วิธีที่ดีที่สุดในการลบแถวของตารางด้วย jQuery คืออะไร

309 javascript  jquery  html-table 

ฉันต้องการทางออกง่ายๆ ฉันรู้ว่ามันคล้ายกับคำถามอื่น ๆ เช่น: ตาราง HTML ที่มีส่วนหัวคงที่และคอลัมน์คงที่หรือไม่ ฉันจะล็อกแถวแรกและคอลัมน์แรกของตารางขณะเลื่อนได้อย่างไรอาจใช้ JavaScript และ CSS แต่ฉันต้องการเพียงคอลัมน์ซ้ายเดียวที่จะถูกแช่แข็งและฉันต้องการโซลูชันที่เรียบง่ายและไร้สคริปต์

266 html  css  html-table 

จากมาร์กอัปต่อไปนี้ฉันจะใช้ CSS เพื่อบังคับหนึ่งเซลล์ (เซลล์ทั้งหมดในคอลัมน์) ให้พอดีกับความกว้างของเนื้อหาภายในแทนที่จะยืดได้ (ซึ่งเป็นพฤติกรรมเริ่มต้น) <style type="text/css"> td.block { border: 1px solid black; } </style> <table style="width: 100%;"> <tr> <td class="block">this should stretch</td> <td class="block">this should stretch</td> <td class="block">this should be the content width</td> </tr> </table> แก้ไข: ฉันรู้ว่าฉันสามารถเขียนโค้ดความกว้างได้ยาก แต่ฉันไม่อยากทำเพราะเนื้อหาที่จะไปในคอลัมน์นั้นเป็นแบบไดนามิก ดูภาพด้านล่างภาพแรกคือสิ่งที่มาร์กอัปสร้าง รูปที่สองคือสิ่งที่ฉันต้องการ

266 html  css  html-table