拉伸橫跨TD

的跨度，我認爲一個形象最能說明這一點：JS FIDDLE位置：http://jsfiddle.net/fp2Ak/拉伸橫跨TD

enter image description here

我想要做的，是這些線路的實際觸摸。每一個都是一個數字在英寸內的跨度。注意：有些Tds包含多個跨度，例如218和222.（您可以看到帶有淡藍色線條的tr。）

正如您所看到的，它確實觸及某一點，因爲這是列中最大的元素（包括標題）。但情況很少。我如何將它伸展到所有案例中。

你可以建議使用除跨度之外的其他東西，但請注意，我確實需要一個以上的東西，因此不能應用於td。

管轄這個最迄今爲止的CSS：

table.Timetable td , table.Timetable th 
    { 
     border-spacing: 0px; 
     padding: 0px; 
    } 

    .bookingStart, .bookingMiddle, .bookingEnd 
    { 
     background-color: white; 
     color: Black; 
     border-top: 2px solid black; 
     border-bottom: 2px solid black; 
    } 
    .bookingStart 
    { 
     border-left: 2px solid black; 
    } 
    .bookingEnd 
    { 
     border-right: 2px solid black; 
    }

哦，preferabblly我還想能夠再次墊細胞，作爲日顯然已經合併在一起。

的jsfiddle的在這裏：http://jsfiddle.net/fp2Ak/

來源

2011-11-29 Doomsknight

提供JSfiddle或者帶有示例HTML的東西會很有幫助，否則人們必須手動編寫已有的HTML。 – Jon

是的，好主意。這裏：http://jsfiddle.net/fp2Ak/ – Doomsknight

跨距爲浮動通過寬度的影響，因此你可以這樣做：

td span{float:left; width:100%; min-width:100%;}

或者更準確地說，如果我正確理解你的CSS：

.bookingStart, .bookingMiddle, .bookingEnd 
{ 
    background-color: white; 
    color: Black; 
    border-top: 2px solid black; 
    border-bottom: 2px solid black; 
    float:left; 
    width:100%; 
    min-width:100%; /*some browsers like this better*/ 
}

來源

2011-11-29 13:42:58

雖然這將是非常有用的有一些CSS/HTML來玩，以確保 –

jsfiddle.net/fp2Ak :)我試過了，它是更接近一步，但我得到奇怪的線出現在其他地方。 – Doomsknight

好吧，它看起來像你有跨預訂中產階級，沒有數據，這可能是爲什麼（因爲他們現在有寬度），我建議刪除那些你想要的空 –

你應該把你的邊界對TD並不跨度。這樣可以讓你在td上加一些填充字符，即使長數字看起來也不錯。

來源

2011-11-29 13:35:54 locrizak

我不能像我說的那樣，每個td都可以/（有些可以）包含多個數字。 – Doomsknight

你有沒有厭倦使跨度'100％'寬度或固定寬度？ – locrizak

我現在有，但沒有改變任何東西。 :(試試JSFiddle http://jsfiddle.net/fp2Ak/ – Doomsknight

回答

相關問題