การเขียนโปรแกรม html-table

4

ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน6 ปีที่ผ่านมา ปรับปรุงคำถามนี้ มีไลบรารี jQuery หรือ javascript ที่สร้างตารางไดนามิกที่ให้ข้อมูล json หรือไม่ ฉันไม่ต้องการกำหนดคอลัมน์ไลบรารีควรอ่านคีย์ในแฮช json และสร้างคอลัมน์ แน่นอนฉันสามารถทำซ้ำผ่านข้อมูล json และสร้างตาราง html ได้ ฉันแค่อยากรู้ว่ามีห้องสมุดที่สามารถนำมาใช้ซ้ำได้หรือไม่

112 javascript html json html-table

5

การใช้ Position Relative / Absolute ภายใน TD?

ฉันมีรหัสต่อไปนี้: <td style="position: relative; min-height: 60px; vertical-align: top;"> Contents of table cell, variable height, could be more than 60px; <div style="position: absolute; bottom: 0px;"> Notice </div> </td> สิ่งนี้ใช้ไม่ได้เลย ด้วยเหตุผลบางประการตำแหน่ง: คำสั่งสัมพัทธ์ไม่ถูกอ่านบน TD และการแจ้งเตือน DIV ถูกวางไว้นอกคอนเทนเนอร์เนื้อหาที่ด้านล่างของหน้าของฉัน ฉันได้พยายามใส่เนื้อหาทั้งหมดของ TD ลงใน DIV เช่น: <td> <div style="position: relative; min-height: 60px; vertical-align: top;"> Contents of table …

108 html position html-table

1

เส้นขอบรอบองค์ประกอบ tr ไม่แสดง?

ดูเหมือนว่า Chrome / Firefox ไม่ทำให้เส้นขอบบนแต่มันทำให้ชายแดนถ้าเลือกเป็นtrtable tr td ฉันจะตั้งค่าเส้นขอบบน tr ได้อย่างไร การลองของฉันไม่ได้ผล: table tr { border: 1px solid black; } <table> <tbody> <tr> <td> Text </td> </tr> </tbody> </table> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด http://jsfiddle.net/edi9999/VzPN2/ นี่เป็นคำถามที่คล้ายกัน: ตั้งค่าเส้นขอบเป็นตาราง tr ทำงานได้ทุกอย่างยกเว้น IE 6 และ 7แต่ดูเหมือนว่าจะใช้ได้ทุกที่ยกเว้น IE

108 html css html-table

10

jquery ตารางที่ชัดเจน

ฉันมีตาราง HTML ที่เต็มไปด้วยแถวจำนวนหนึ่ง ฉันจะลบแถวทั้งหมดออกจากตารางได้อย่างไร

107 jquery html-table

13

HTML / CSS: ทำให้สอง divs มีความสูงเท่ากัน

ฉันมีปัญหาแปลก ๆ เล็กน้อยที่ฉันกำลังแก้โดยใช้ a tableดูด้านล่าง โดยพื้นฐานแล้วฉันต้องการให้สอง div ใช้พื้นที่ 100% ของความกว้างที่มีอยู่ แต่ใช้พื้นที่ในแนวตั้งเท่าที่จำเป็นเท่านั้น (ซึ่งไม่ชัดเจนจากภาพ) ทั้งสองควรมีความสูงเท่ากันตลอดเวลาโดยมีเส้นคั่นระหว่างเล็กน้อยดังที่แสดง (ที่มา: pici.se ) ทั้งหมดนี้ทำได้ง่ายมากโดยใช้tableที่ฉันกำลังทำอยู่ อย่างไรก็ตามฉันไม่กระตือรือร้นในการแก้ปัญหามากนักเนื่องจากในทางความหมายนี่ไม่ใช่ตาราง

106 html css html-table

7

ฉันจะตั้งค่าความกว้างของเซลล์ตารางให้ต่ำสุดยกเว้นคอลัมน์สุดท้ายได้อย่างไร

ฉันมีโต๊ะที่มีความกว้าง 100% ถ้าผมใส่<td>s เข้าไปพวกมันจะกระจายออกโดยมีคอลัมน์ที่ยาวเท่ากัน อย่างไรก็ตามฉันต้องการให้คอลัมน์ทั้งหมดยกเว้นสุดท้ายมีความกว้างน้อยที่สุดโดยไม่ต้องตัดข้อความ สิ่งที่ฉันทำก่อนอื่นคือฉันตั้งค่าwidth="1px"ในทุกคำ<td>ยกเว้นครั้งสุดท้าย (แม้ว่าจะเลิกใช้แล้ว แต่style="width:1px"ก็ไม่มีผลใด ๆ ) ซึ่งทำงานได้ดีจนกว่าฉันจะมีข้อมูลหลายคำในคอลัมน์ ในกรณีนี้เพื่อให้ความยาวเล็กที่สุดมันจะห่อข้อความของฉัน ให้ฉันสาธิต ลองนึกภาพตารางนี้: --------------------------------------------------------------------------------- element1 | data | junk here | last column --------------------------------------------------------------------------------- elem | more data | other stuff | again, last column --------------------------------------------------------------------------------- more | of | these | rows --------------------------------------------------------------------------------- ไม่ว่าฉันจะพยายามยังไงสิ่งที่ฉันได้รับก็คือ: --------------------------------------------------------------------------------- element1 | data …

106 html css html-table

14

กล่องข้อความอินพุต HTML ที่มีความกว้าง 100% ล้นเซลล์ตาราง

มีใครรู้บ้างว่าทำไมองค์ประกอบอินพุตที่มีความกว้าง 100% จึงอยู่เหนือเส้นขอบเซลล์ของตาราง ในตัวอย่างง่ายๆด้านล่างช่องป้อนข้อมูลไปที่เส้นขอบเซลล์ของตารางผลลัพธ์ที่ได้นั้นแย่มาก สิ่งนี้ได้รับการทดสอบแล้วและเกิดขึ้นในลักษณะเดียวกันกับ: Firefox, IE7 และ Safari มันสมเหตุสมผลสำหรับคุณหรือไม่? ฉันขาดอะไรไปคุณรู้วิธีแก้ปัญหาที่เป็นไปได้ไหม <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">  <title>Test input text in table</title> <style type="text/css"> table {border-top: 1px solid #ff0000; border-left: …

106 html input html-table width

15

ฉันจะซ่อนแถวตาราง HTML <tr> เพื่อไม่ให้มีพื้นที่ว่างได้อย่างไร

ฉันจะซ่อนแถวตาราง HTML <tr>เพื่อไม่ให้มีพื้นที่ว่างได้อย่างไร ฉัน<tr>ตั้งค่าเป็นหลายชุดstyle="display:none;"แต่ยังคงมีผลต่อขนาดของตารางและเส้นขอบของตารางจะสะท้อนถึงแถวที่ซ่อนอยู่

106 html css html-table

6

วิธีสร้าง <div> เติม <td> ความสูง

ฉันได้ดูโพสต์ต่างๆใน StackOverflow แล้ว แต่ไม่สามารถหาคำตอบสำหรับคำถามที่ค่อนข้างง่ายนี้ได้ ฉันมีโครงสร้าง HTML ดังนี้: <table> <tr> <td class="thatSetsABackground"> <div class="thatSetsABackgroundWithAnIcon"> <dl> <dt>yada </dt> <dd>yada </dd> </dl> <div> </td> <td class="thatSetsABackground"> <div class="thatSetsABackgroundWithAnIcon"> <dl> <dt>yada </dt> <dd>yada </dd> </dl> <div> </td> </tr> </table> สิ่งที่ฉันต้องการคือdivเพื่อเติมเต็มความสูงของtdดังนั้นฉันจึงสามารถจัดตำแหน่งพื้นหลังของ div (ไอคอน) ที่มุมล่างขวาของไฟล์td. คุณจะแนะนำให้ฉันทำอย่างไร

106 html css html-table

12

วิธีทำให้เซลล์ตาราง HTML สามารถแก้ไขได้?

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

105 html editor html-table cell

20

ตารางที่มีส่วนหัวคงที่และคอลัมน์คงที่บน pure css

ฉันต้องการสร้างตาราง html (หรือสิ่งที่คล้ายกัน) โดยมีส่วนหัวคงที่และคอลัมน์แรกคงที่ ทุกวิธีที่ฉันเคยเห็นใช้ Javascript หรือjQueryตั้ง scrollTop / scrollLeft แต่มันทำงานไม่ราบรื่นบนเบราว์เซอร์มือถือดังนั้นฉันจึงกำลังมองหาโซลูชัน CSS ที่แท้จริง ฉันพบวิธีแก้ปัญหาสำหรับคอลัมน์คงที่ที่นี่: jsfiddle.net/C8Dtf/20/แต่ฉันไม่รู้ว่าจะปรับปรุงอย่างไรเพื่อให้ส่วนหัวได้รับการแก้ไขด้วย ฉันต้องการให้มันทำงานบนเบราว์เซอร์ webkit หรือใช้css3คุณสมบัติบางอย่างแต่ฉันขอย้ำอีกครั้งว่าฉันไม่ต้องการใช้Javascriptเพื่อเลื่อน แก้ไข:นี่คือตัวอย่างของพฤติกรรมที่ฉันต้องการบรรลุ: https://web.archive.org/web/20130829032141/http://datatables.net/release-datatables/extras/FixedColumns/css_size.html

104 html css html-table markup fixed-header-tables

19

ลบแถวทั้งหมดในตาราง HTML

ฉันจะลบแถวทั้งหมดของตาราง HTML ได้อย่างไรยกเว้นไฟล์ <th>ใช้ Javascript และไม่ต้องวนซ้ำแถวทั้งหมดในตาราง ฉันมีตารางขนาดใหญ่มากและฉันไม่ต้องการหยุด UI ในขณะที่ฉันวนรอบแถวเพื่อลบออก

104 javascript html html-table

7

ขนาดคอลัมน์ตาราง

ในBootstrap 3ผมสามารถนำไปใช้col-sm-xxกับthแท็กในtheadและปรับขนาดคอลัมน์ของตารางที่จะ อย่างไรก็ตามสิ่งนี้ใช้ไม่ได้ใน bootstrap 4 ฉันจะบรรลุสิ่งนี้ใน bootstrap 4 ได้อย่างไร? <thead> <th class="col-sm-3">3 columns wide</th> <th class="col-sm-5">5 columns wide</th> <th class="col-sm-4">4 columns wide</th> </thead> ดูจาก codeply ที่มีขนาดไม่เหมาะสมโดยเฉพาะอย่างยิ่งถ้าคุณเพิ่มข้อมูลบางอย่างลงในตาราง ดูว่าสิ่งนี้ทำงานอย่างไร: <div class="container" style="border: 1px solid black;"> <table class="table table-bordered"> <thead> <tr class="row"> <th class="col-sm-3">3 columns wide</th> <th class="col-sm-5">5 columns wide</th> <th class="col-sm-4">4 columns …

104 css twitter-bootstrap html-table bootstrap-4

11

ใช้ CSS td width absolute ตำแหน่ง

โปรดดูJSFIDDLEนี้ td.rhead { width: 300px; } เหตุใดความกว้าง CSS จึงไม่ทำงาน <table> <thead> <tr> <td class="rhead">need 300px</td> <td colspan="7">Week #0</td> <td colspan="7">Week #1</td>  </tr> <tr> <td class="rhead"></td> <td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td> <td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>  </tr> <thead> </table> นอกจากนี้ผลกระทบของตำแหน่ง: fixed, absolute etc มีความกว้าง td อย่างไรถ้ามี? ฉันกำลังมองหาเหตุผลที่มากกว่าการแก้ไข ฉันหวังว่าจะเข้าใจวิธีการทำงาน

103 html css html-table

4

ฉันจะตั้งค่าความกว้างสูงสุดของเซลล์ตารางโดยใช้เปอร์เซ็นต์ได้อย่างไร

<table> <tr> <td>Test</td> <td>A long string blah blah blah</td> </tr> </table> <style> td{max-width:67%;} </style> ข้างต้นไม่ทำงาน ฉันจะตั้งค่าความกว้างสูงสุดของเซลล์ตารางโดยใช้เปอร์เซ็นต์ได้อย่างไร

103 html css html-table

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