ทำไมตาราง Bootstrap ของ Twitter จึงมีความกว้าง 100% เสมอ

148

สมมติว่ามาร์กอัปนี้:

<table class="table table-bordered" align="center">

ไม่ว่าจะมีเซลล์กี่เซลล์ตารางจะมีความกว้าง 100% เสมอ ทำไมเป็นอย่างนั้น?

twitter-bootstrap

— Skowron เส้น
แหล่งที่มา

3

เพราะมันใช้ความกว้างของพ่อแม่ได้อย่างมีประสิทธิภาพ นั่นคือวิธีที่ระบบกริดควรทำงาน!

— Vishal

คุณต้องการให้โต๊ะของคุณกว้างเท่าไร

— Andres Ilich

1

ฉันอยากให้มันขึ้นอยู่กับจำนวนของเซลล์เช่นเดียวกับตารางธรรมดา

— skowron-line

1

สำหรับผู้ที่ค้นหาวิธีการตั้งค่าความกว้างของเซลล์เช่นความกว้าง div ผ่านการขยายตรวจสอบคำตอบนี้

— alexche8

228

ตารางทั้งหมดภายใน bootstrap ยืดออกตามคอนเทนเนอร์ซึ่งคุณสามารถทำได้ง่ายๆโดยวางตารางไว้ใน.span*องค์ประกอบกริดที่คุณเลือก หากคุณต้องการลบคุณสมบัตินี้คุณสามารถสร้างคลาสตารางของคุณเองและเพิ่มลงในตารางที่คุณต้องการขยายด้วยเนื้อหาภายใน:

.table-nonfluid {
   width: auto !important;
}

คุณสามารถเพิ่มคลาสนี้ภายในสไตล์ชีทของคุณและเพิ่มไปยังคอนเทนเนอร์ของตารางของคุณเช่น:

<table class="table table-nonfluid"> ... </table>

วิธีนี้การเปลี่ยนแปลงของคุณจะไม่มีผลกับสไตล์ชีท bootstrap (คุณอาจต้องการตารางฟลูอิดที่อื่นในเอกสารของคุณ)

— Andres Ilich
แหล่งที่มา

1

หากคุณวางตารางไว้ในแท็ก span * เพื่อจัดกึ่งกลางตารางคุณจะรวมออฟเซ็ต * ด้วยหรือไม่

— HPWD

@dlackey ใช่คุณสามารถชดเชยตารางด้วยคลาสเพื่อจัดกึ่งกลางคุณสามารถเพิ่ม.span*คลาสลงในตารางของคุณเพื่อให้มีความกว้างได้

— Andres Ilich

2

อย่างน้อยด้วย bootstrap 3 มันใช้งานได้สำหรับฉันหลังจากเพิ่ม!importantไปยังwidth: auto

— geekQ

เราต้องใช้คลาส span ของ bootstarp สำหรับตารางหรือเราต้องกำหนดสไตล์สำหรับคลาส. span ด้วยตนเอง

— Jot Dhaliwal

1

คำเตือน. ระวังหากใช้ร่วมกับ. table-responsive และ. table-bordered เส้นขอบจะถูกนำไปใช้กับคอนเทนเนอร์. table-responsive เมื่อต่ำกว่าความกว้างหน้าจอ 767px (bootstrap 3.x)

— Stuart

31

<table style="width: auto;" ...ทำงานได้ดี ทดสอบใน Chrome 38, IE 11 และ Firefox 34

jsfiddle: http://jsfiddle.net/rpaul/taqodr8o/

— Razan Paul
แหล่งที่มา

15

หากคุณกำลังใช้เงินทุนที่ 4, .w-autoการใช้งาน

ดูhttps://getbootstrap.com/docs/4.1/utilities/sizing/

— Danko Durbić
แหล่งที่มา

13

คำตอบ # 1:

ต่อสู้กับมันทำไม ทำไมไม่ควบคุมความกว้างของตารางโดยใช้ตาราง bootstrap? นี่คือมาร์กอัป Bootstrap 3

<div class="row">
    <div class="col-sm-6">
        <table></table>
    </div>
</div>

สิ่งนี้จะสร้างตารางที่มีครึ่งหนึ่ง (6 จาก 12) ของความกว้างขององค์ประกอบที่มี

บางครั้งฉันใช้รูปแบบอินไลน์ตามคำตอบอื่น ๆ แต่มันก็ท้อแท้

คำตอบ # 2:

หากคุณใช้ bootstrap 4 มันมีคลาสตัวช่วยที่ดีสำหรับความกว้างเช่น:

w-25, w-50, w-75, and w-100

นี่คือเอกสาร: https://getbootstrap.com/docs/4.0/utilities/sizing/

— เจส
แหล่งที่มา

2

นี่คือทางออกที่ง่ายที่สุดและควรเป็นคำตอบที่ได้รับการยอมรับ

— Jeff Brown

12

ฉันมีปัญหาเดียวกันฉันทำตารางคงที่แล้วระบุความกว้าง td ของฉัน หากคุณมีที่คุณสามารถทำเช่นนั้น

<style>
table {
table-layout: fixed;
word-wrap: break-word;
}
</style>

<td width="10%" /td>

ฉันไม่มีโชคกับ. table-nonfluid

— DDDD
แหล่งที่มา

1

ลองwidth: auto !important;

— Leo

คุณสามารถหลีกเลี่ยงได้!important(เป็นการปฏิบัติที่ไม่ดี ) ดูความคิดเห็นในคำตอบด้านล่าง

— โอลลี่เบ็นเน็ตต์

3

ฉันพยายามเพิ่มstyle="width: auto !important"และใช้งานได้ดีสำหรับฉัน!

— Sergey Dolgopolov
แหล่งที่มา

1

หากคุณแน่ใจว่า CSS ที่กำหนดเองของคุณปรากฏขึ้นหลังจาก Bootstrap CSS (เช่น<link>แท็กสไตล์ที่กำหนดเองของคุณปรากฏใต้<link>แท็กBootstrap ) กฎนั้นจะเรียงซ้อนตามที่ออกแบบมาและคุณไม่จำเป็นต้องใช้!importantข้อยกเว้นเลย สิ่งนี้เป็นจริงเพราะwidth: 100%;มีการกำหนดไว้tableในBootstrap CSSและดังนั้นจึงเป็นการแทนที่width: auto;กฎของคุณ

— Ollie Bennett

ไม่ได้จริงๆคำตอบดีกว่าที่จะแก้ไขคำตอบที่ได้รับการยอมรับในปัจจุบันซึ่งส่วนใหญ่ของคนอ่าน(ผมแก้ไขได้ในขณะนี้)

— Iulian Onofrei