خاصية تخطيط جدول CSS
مثال
قم بتعيين خوارزميات مختلفة لتخطيط الجدول:
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout:
fixed;
width: 180px;
}
التعريف والاستخدام
تحدد الخاصية الخوارزمية المستخدمة table-layoutلتخطيط خلايا الجدول والصفوف والأعمدة.
نصيحة: الفائدة الرئيسية لتخطيط الجدول: ثابت ؛ هو أن الجدول يعرض بشكل أسرع. في الجداول الكبيرة ، لن يرى المستخدمون أي جزء من الجدول حتى يقوم المستعرض بعرض الجدول بأكمله. لذلك ، إذا كنت تستخدم تنسيق الجدول: ثابت ، سيرى المستخدمون الجزء العلوي من الجدول أثناء تحميل المتصفح وعرض بقية الجدول. هذا يعطي الانطباع بأن الصفحة يتم تحميلها بشكل أسرع!
| القيمة الافتراضية: | تلقاءي |
|---|---|
| وارث: | رقم |
| متحرك: | رقم. اقرأ عن animatable |
| الإصدار: | CSS2 |
| بناء جملة JavaScript: | الكائن .style.tableLayout = "ثابت" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
| Property | |||||
|---|---|---|---|---|---|
| table-layout | 14.0 | 5.0 | 1.0 | 1.0 | 7.0 |
بنية CSS
table-layout: auto|fixed|initial|inherit;
قيم الملكية
| Value | Description | Play it |
|---|---|---|
| auto | Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout | |
| fixed | Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
الصفحات ذات الصلة
دروس CSS: جدول CSS
مرجع DOM HTML: خاصية tableLayout