Jump to content
phn221181

tabledata is not "organized" - Bootstrap table

Recommended Posts

hello prodeveloper,

I want to show some data in a html table with bootstraps basics. The first columns are really large, the last ones are really tiny. Can someone tell me where the mistake could be found? I have 3 headlines tags (<th>) and 7 tabledata tags (<td>). I have already tried "<th colspan="3"> to set columnheadlines to the right position, without success.

in this table i want to show how many math tasks my childeren solved right, calucalted false and how many "stars" they reached in a day, a week, the week before, in a month and so one.

Can someone help me to make the the table look good?

that's the result: click here

that's the code:

   <thead>
      <tr><th style="padding-left:20px"><strong>#</strong></th>
          <th style="padding-left:20px"><strong>Kilian</strong></th>
          <th style="padding-left:20px"><strong>Ilias</strong></th>
      </tr>
    </thead>
    <tbody>  
      <tr>
        <td>heute</td>
        <td><i class="fa fa-check" aria-hidden="true"></i> <? echo "  ".number_format($HeuteKilianRichtig,0,",",".")."  "; ?></td>
        <td><i class="fa fa-close" aria-hidden="true"></i> <? echo "  ".number_format($HeuteKilianFalsch,0,",",".")."  "; ?></td> 
        <td><i class="fa fa-star-o" aria-hidden="true"></i> <? echo "  ".number_format($HeuteKilianSterne,0,",","."); ?></td>
        <td><i class="fa fa-check" aria-hidden="true"></i> <? echo "  ".number_format($HeuteIliasRichtig,0,",",".")."  "; ?></td> 
        <td><i class="fa fa-close" aria-hidden="true"></i> <? echo "  ".number_format($HeuteIliasFalsch,0,",",".")."  "; ?></td>
        <td><i class="fa fa-star-o" aria-hidden="true"></i> <? echo "  ".number_format($HeuteIliasSterne,0,",","."); ?></td>
      </tr>
      <tr>
        <td>aktuelle Woche</td>
        <td><i class="fa fa-check" aria-hidden="true"></i> <? echo "  ".number_format($aktuelleWocheKilianRichtig,0,",",".")."  "; ?></td>
        <td><i class="fa fa-close" aria-hidden="true"></i> <? echo "  ".number_format($aktuelleWocheKilianFalsch,0,",",".")."  "; ?></td>  
        <td><i class="fa fa-star-o" aria-hidden="true"></i> <? echo "  ".number_format($aktuelleWocheKilianSterne,0,",","."); ?></td>
        <td><i class="fa fa-check" aria-hidden="true"></i> <? echo "  ".number_format($aktuelleWocheIliasRichtig,0,",",".")."  "; ?></td>
        <td><i class="fa fa-close" aria-hidden="true"></i> <? echo "  ".number_format($aktuelleWocheIliasFalsch,0,",",".")."  "; ?></td>
        <td><i class="fa fa-star-o" aria-hidden="true"></i> <? echo "  ".number_format($aktuelleWocheIliasSterne,0,",","."); ?></td>
      </tr>
      <tr>
        <td>Vorwoche</td>
        <td><i class="fa fa-check" aria-hidden="true"></i> <? echo "  ".number_format($Woche_1KilianRichtig,0,",",".")."  "; ?></td>
        <td><i class="fa fa-close" aria-hidden="true"></i> <? echo "  ".number_format($Woche_1KilianFalsch,0,",",".")."  "; ?></td>
        <td><i class="fa fa-star-o" aria-hidden="true"></i> <? echo "  ".number_format($Woche_1KilianSterne,0,",","."); ?></td>
        <td><i class="fa fa-check" aria-hidden="true"></i> <? echo "  ".number_format($Woche_1IliasRichtig,0,",",".")."  "; ?></td>
        <td><i class="fa fa-close" aria-hidden="true"></i> <? echo "  ".number_format($Woche_1IliasFalsch,0,",",".")."  "; ?></td>
        <td><i class="fa fa-star-o" aria-hidden="true"></i> <? echo "  ".number_format($Woche_1IliasSterne,0,",","."); ?></td>
        </td>
      </tr>
      <tr>
        <td>Vor 2 Wochen</td>
        <td><i class="fa fa-check" aria-hidden="true"></i> <? echo "  ".number_format($Woche_2KilianRichtig,0,",",".")."  "; ?> 
            <i class="fa fa-close" aria-hidden="true"></i> <? echo "  ".number_format($Woche_2KilianFalsch,0,",",".")."  "; ?> 
            <i class="fa fa-star-o" aria-hidden="true"></i> <? echo "  ".number_format($Woche_2KilianSterne,0,",","."); ?>
        </td>
        <td><i class="fa fa-check" aria-hidden="true"></i> <? echo "  ".number_format($Woche_2IliasRichtig,0,",",".")."  "; ?> 
            <i class="fa fa-close" aria-hidden="true"></i> <? echo "  ".number_format($Woche_2IliasFalsch,0,",",".")."  "; ?> 
            <i class="fa fa-star-o" aria-hidden="true"></i> <? echo "  ".number_format($Woche_2IliasSterne,0,",","."); ?>
        </td>      
      </tr>

 

Share this post


Link to post
Share on other sites

Its difficult to workout what the layout should be, as you have different number of td cells in each row. You would not only have to add 'colspan' to headings, but to td cells as well depending on your needs.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×