html 태그 td 클래스에 스타일 클래스를 적용하는 방법?




조합 선택자 (7)

반응 형 부트 스트랩 테이블을 사용할 때, 나는 찾지 못했습니다.

table.classname td {

<table> 태그가 전혀 없으므로 구문이 작동했습니다. 종종 이와 같은 모듈은 바깥 쪽 태그를 사용하지 않고 단지 <thead><tbody> 하여 그룹화 할 때 바로 뛰어들 수 있습니다.

이처럼 간단히 지정하면

td.classname {
    max-width: 500px;
    text-overflow: initial;
    white-space: wrap;
    word-wrap: break-word;
}

이는 <td> 직접 무시하므로 변경할 요소에서만 사용할 수 있습니다. 어쩌면 당신의 경우에 사용합니다.

thead.medium td {
  font-size: 40px; 
}
tbody.small td {
  font-size:25px;
}

큰 머리글을 사용하여 일관된 글꼴 크기 조정이 가능합니다.

내가 알아 내려고 시도하는 것은 아래의 표에있는 각 개인 td에 몇 가지 스타일을 적용하는 적절한 구문입니다.

<section id="shows">
<!-- HTML5 section tag for the shows 'section' -->

<h2 class="gig">Shows</h2>

<ul class="gig">

    <!-- Start the table -->
    <table>
        <tr>
            <!-- Setup the header row -->
            <th>When</th>
            <th>Where</th>
            <th>Start</th>
            <th>Finish</th>
        </tr>

        <?php
            // some PHP to fetch all the gig entries from the shows table
            $shows_query = "SELECT * FROM shows ORDER BY date ASC";
            $shows = mysql_query($shows_query);
            // a loop to place all the values in the appropriate table cells
            while ($show = mysql_fetch_array($shows)){
            //begin the loop...
            ?>

        <!-- Start the row -->
        <tr>

            <!-- Format the date value from the database and print it: -->
            <td class="when"><?php 
            $date = date("l, F j, Y", strtotime($show['date'])); 
            echo "$date";
            ?></td>

            <td class="venue"><?php
            echo $show['venue'];
            ?></td>

            <!-- Format the the start and end times and print them: -->
            <td class="start"><?php
            $time = date("G:i", strtotime($show['time'])); 
            echo "$time";
            ?></td>

            <td class="finish"><?php
            $until = date("G:i", strtotime($show['until']));
            echo "$until";
            ?></td>

            <!-- Finish this row -->
        </tr>

        <!-- Some space before the next row -->
        <div class="clear"></div>

        <?php 
            // close the loop:
             }
             ?>
        <!-- Finish the table -->
    </table>
</ul>

</section>

내가 가지고있는 스타일링은 다음과 같습니다.

#shows table.gig { font-size: 25px; }
#shows td.finish { margin-left: 50px;}

나는 테이블 자체를위한 클래스를 가졌지 만 필요한지 확실하지 않았다.

글꼴 크기가 작동하지만 내가 알아낼 수없는 것은 td, th, tr 요소 등에 스타일을 적용하는 방법입니다. 여러 가지를 시도했지만 작동하지 않는 것 같습니다!

어떤 도움을 많이 주셨습니다.

감사.


이 시도

table tr td.classname
{
 text-align:right;
 padding-right:18%;
}

다음과 같이 사용할 수 있습니다 : nth-child (N) CSS selector :

table td:first-child {}  //1
table td:nth-child(2) {} //2
table td:nth-child(3) {} //3
table td:last-child {}   //4

잘 기억한다면 table 에 적용한 일부 CSS 속성은 예상대로 상속되지 않습니다. 따라서 td , trth 요소에 직접 스타일을 적용해야합니다.

각 열에 스타일을 추가해야하는 경우 테이블에서 <col> 요소를 사용하십시오.

여기 예제를 참조하십시오 : http://jsfiddle.net/GlauberRocha/xkuRA/2/

주의 : 당신은 td 에서 margin 을 가질 수 없습니다. 대신 padding 을 사용하십시오.


td를 대상으로하는 좀 더 명확한 방법은 table tr td { }


table.classname td {
    font-size: 90%;
}

나를 위해 일했다. 감사.


단순히 클래스 이름을 만들고 스타일을 정의하십시오.

table.tdfont td {

font-size : 0.9em; }





css