如何在TD内部跨度？

I have a problem with a certain tag, grabbed from an external source. This code you will see is taken from another website, and you could also see a date (ex. 15 Juli Måndag) There is dates all over the page, how could I center them with just CSS? Tried with absolute positioning, which leads to have all dates over each other.

我从某个外部来源抓取某个标签时遇到问题。你会看到这个代码来自另一个网站，你也可以看到一个日期（例如15JuliMåndag）页面上有日期，我怎么能用CSS中心呢？尝试绝对定位，这导致所有日期都超过彼此。

Fiddle here.

在这里小提琴。

My html:

我的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>

My JS:

我的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
    });
}

Check out my fiddle, I don't know how to approach this problem...

看看我的小提琴，我不知道如何解决这个问题...

How I want it: 如何在TD内部跨度？

我多么想要：

7 个解决方案

#1

You can solve it with CSS , see here: http://jsfiddle.net/sMysu/6/
It is tricky workaround , but it works:

你可以用CSS解决它，请看这里：http：//jsfiddle.net/sMysu/6/这是一个棘手的解决方法，但它的工作原理：

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

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

#2

If the span is dynamically generated inside the td, I suggest you to make it as display:block; and align it at the center with margin:0 auto;

如果跨度是在td内动态生成的，我建议你把它设为display：block;并在中心对齐边距：0 auto;

For Instance,

例如，

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

#3

UPDATES:

更新：

After a deep analysis, I think I got a simple solution for this.

经过深入分析，我认为我得到了一个简单的解决方案。

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

From your code, you have a empty div .divider before all table. So using CSS navigation it works.

从你的代码中，你在所有表之前都有一个空的div .divider。所以使用CSS导航它的工作原理。

Check this Fiddle

检查这个小提琴

#4

try using text-align: center in your css

尝试在你的CSS中使用text-align：center

#5

Just use vertical-align:middle to that TD where you are showing dates. Will not be in you markup though as you are getting it from another site, so use this as CSS.

只需使用vertical-align：middle到显示日期的TD。当你从另一个站点获取它时，不会在你的标记中，所以将它用作CSS。

td{
   vertical-align:middle;
}

Updated Fiddle

更新小提琴

#6

To just align the texts in the specified area in the middle use the following:

要仅在中间指定区域中对齐文本，请使用以下内容：

.article table {
    vertical-align:middle;
}

#7

You have to change the HTML you get:

你必须改变你得到的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/

You also can do it by removing all the width ( so just $('table table td', article).css('width', '') instead of the .each loop), and set the width of table table tr td:first-child to 150px in your css

您也可以通过删除所有宽度来实现它（所以只需$（'table table td'，article）.css（'width'，''）而不是.each循环），并设置表table tr td的宽度：你的CSS中的第一个孩子到150px

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

#1