如何在TD內部跨度？

Question

我從某個外部來源抓取某個標簽時遇到問題。 你會看到這個代碼來自另一個網站，你也可以看到一個日期（例如15JuliMåndag）頁面上有日期，我怎么能用CSS中心？ 嘗試絕對定位，這導致所有日期都超過彼此。

在這里小提琴

我的HTML：

    <div id="header">
    <div class="schema">
        <h1>Schema</h1>
    </div>
    <div class="back"><a id="back" href="index.html"></a>
    </div>
</div>
<div id="content">
    <div class="content" style="margin-top:0px;">
        <div class="article" style="text-align:center;">
            <!-- Här skrivs det ut en massa saker -->
        </div>
    </div>
</div>

我的JS：

$(window).load(function () { //Fade
    $("#status").fadeOut();
    $("#preloader").delay(350).fadeOut("slow");
})
grabShedule();

function grabShedule() {
    var url = "http://1life.se/scraper/Schedule.php"; //URL
    $.getJSON(url, function (response) {
        var html = response.scraped[0].html; //Answer
        $('.article').append(html); //Answer is appended to .article
    });
}

看看我的小提琴，我不知道如何處理這個問題...

我多么想要：

Answer 1

如果跨度是在td內動態生成的，我建議你把它作為display:block; 並在中心對齊margin:0 auto;

例如，

td span{display:block; text-align:center; margin:0 auto;}

Answer 2

你可以用CSS解決它，請看這里： http ： //jsfiddle.net/sMysu/6/
這是一個棘手的解決方法，但它的工作原理：

td[valign="top"] {
    display: block;
}

td[valign="top"][style="width: 15%"] {
    white-space: nowrap;
    display: table-cell;
}

Answer 3

更新：

經過深入分析，我認為我得到了一個簡單的解決方案。

.divider + table>tbody>tr>td:first-child{
    position: absolute;
    left:50%;
}

從你的代碼中，你在所有表之前都有一個空div .divider 。 所以使用CSS導航它的工作原理。

檢查這個小提琴

Answer 4

只需使用vertical-align:middle到顯示日期的TD 。 當你從另一個站點獲取它時，不會在你的標記中，所以將它用作CSS。

td{
   vertical-align:middle;
}

更新小提琴

Answer 5

嘗試在你的CSS中使用text-align: center

Answer 6

要僅在中間指定區域中對齊文本，請使用以下內容：

.article table {
    vertical-align:middle;
}

Answer 7

你必須改變你得到的HTML：

var html = response.scraped[0].html,
    article = $('.article'); //Svaret
article .append(html); //Svaret skrivs ut i .article
$('table table td', article).each(function () {
    var width = this.style.width;
    if (width == '85%') {
        width = '';
    } else {
        width = '150px';
    }
    this.style.width = width;
});

http://jsfiddle.net/sMysu/10/

您也可以通過刪除所有寬度來實現（所以只需$('table table td', article).css('width', '')而不是.each循環），並設置table table tr td:first-child的寬度table table tr td:first-child你的CSS中的table table tr td:first-child到150px

http://jsfiddle.net/sMysu/9/