3

in my case i have 1000 rows data table.so i cant cant check each every td is empty or not in myself. so i decide to write script for empty table data style for text-align:center and content: '-' . i don't have idea for how to do it so guys please help me.

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
<div class="col-md-12 col-sm-6">
  <div class="table-style-1">
    <div class="round-box"><img class="sppb-img-responsive img-responsive" src="<?= base_url('media/images/') ?>associates-flag-8.jpg" alt=""></div>
    <div class="head"><span>OUR MAJOR CLIENTS IN OMAN</span>
    </div>
    <table class="table table-bordered client-1">
      <thead>
        <tr>
          <th>COMPANY NAME</th>
          <th>CITY</th>
          <th>SERVICES</th>
        </tr>
      </thead>
      <tbody class="EMIRATES">
        <tr>
          <tr>
            <td>Dream Tourist Village </td>
            <td></td>
            <td>Hotel / Resort
            </td>
          </tr>
          <tr>
            <td>City Seasons Muscat </td>
            <td></td>
            <td>Hotel / Resort</td>
          </tr>
          <tr>
            <td>
              Tawoos Industrial Services Company LLC </td>
            <td></td>
            <td>Catering Company </td>
          </tr>
          <tr>
            <td>S.J. Abed & Al Sulaimi Catering Group LLC </td>
            <td></td>
            <td>
            </td>
          </tr>
          <tr>
            <td>Ministry of Defence </td>
            <td></td>
            <td>Ministry of Defense</td>
          </tr>
          <tr>
            <td>The Sultan Special Force </td>
            <td></td>
            <td>Ministry of Defense</td>
          </tr>
          <tr>
            <td>Port Services Corporation SAOG </td>
            <td></td>
            <td>Port Operation </td>
          </tr>
          <tr>
            <td>Port of Salalah</td>
            <td></td>
            <td>Port Operation </td>
          </tr>
          <tr>
            <td> </td>
            <td></td>
            <td>Ready Made Garment Factories </td>
          </tr>
          <tr>
            <td>
              Al Buraimi Garments, Tailoring & Embroidery L.L.C </td>
            <td></td>
            <td>Ready Made Garment Factories </td>
          </tr>
          <tr>
            <td>Starbag Company. WLL </td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>Shanfari& Partners Company LLC. </td>
            <td></td>
            <td>
              Maintenance/Engineering/ Construction/Contracting Company </td>
          </tr>
          <tr>
            <td>Al Nadha United LLC </td>
            <td></td>
            <td>Maintenance/Engineering/ Construction/Contracting Company </td>
          </tr>
          <tr>
            <td>Al Obaidani Group </td>
            <td></td>
            <td>Maintenance/Engineering/ Construction/Contracting Company </td>
          </tr>
          <tr>
            <td>
              Cement Marketing Co. LLC </td>
            <td></td>
            <td> </td>
          </tr>
      </tbody>
    </table>
  </div>
</div>

every empty td is need to be center and css content is "-".

Improve this question
1
  • If you use a snippet then please use the Tidy button before inserting the snippet into your question. Commented May 9, 2020 at 11:18

4 Answers 4

Reset to default
2

:empty is used for empty contents. So you can use this with your css

td:empty{
   text-align:center;
}
td:empty:before{
  content:"-"
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You can also use jQuery to achieve that. Example:

$('td:empty').each(function(){
   $(this).addClass('text-aligned-class');
   $(this).html('-');
})

And as a style:

.text-aligned-class {
    text-align: center;
}
Improve this answer

2 Comments

This would definitely work, but the use of javascript is so unnecessary in this case. pc_coders's solution is better in my opinion.
I agree. :empty in itself is pretty safe to use with modern browsers, but there are still a little bit support missing.
1

here is a solution if You want to use JS, it can use for checking any condition of your table.

happy coding .

const elements = document.getElementsByTagName('td');
Array.from(elements).forEach((element, index) => {
  if (element.innerText == '') {
    //console.log(element.innerText)
    element.style.textAlign = "center"
    element.innerHTML = '-'
  }
});
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <div class="col-md-12 col-sm-6">
    <div class="table-style-1">
      <div class="round-box"><img class="sppb-img-responsive img-responsive" src="<?= base_url('media/images/') ?>associates-flag-8.jpg" alt=""></div>
      <div class="head"><span>OUR MAJOR CLIENTS IN OMAN</span>

      </div>
      <table class="table table-bordered client-1">
        <thead>
          <tr>
            <th>COMPANY NAME</th>
            <th>CITY</th>
            <th>SERVICES</th>
          </tr>
        </thead>
        <tbody class="EMIRATES">
          <tr>

            <tr>
              <td>Dream Tourist Village </td>
              <td></td>
              <td>Hotel / Resort
              </td>
            </tr>
            <tr>
              <td>City Seasons Muscat </td>
              <td></td>
              <td>Hotel / Resort</td>
            </tr>
            <tr>
              <td>
                Tawoos Industrial Services Company LLC </td>
              <td></td>
              <td>Catering Company </td>
            </tr>
            <tr>
              <td>S.J. Abed & Al Sulaimi Catering Group LLC </td>
              <td></td>
              <td>
              </td>
            </tr>
            <tr>
              <td>Ministry of Defence </td>
              <td></td>
              <td>Ministry of Defense</td>
            </tr>
            <tr>
              <td>The Sultan Special Force </td>
              <td></td>
              <td>Ministry of Defense</td>
            </tr>
            <tr>
              <td>Port Services Corporation SAOG </td>
              <td></td>
              <td>Port Operation </td>
            </tr>
            <tr>
              <td>Port of Salalah</td>
              <td></td>
              <td>Port Operation </td>
            </tr>
            <tr>
              <td> </td>
              <td></td>
              <td>Ready Made Garment Factories </td>
            </tr>
            <tr>
              <td>
                Al Buraimi Garments, Tailoring & Embroidery L.L.C </td>
              <td></td>
              <td>Ready Made Garment Factories </td>
            </tr>
            <tr>
              <td>Starbag Company. WLL </td>
              <td></td>
              <td></td>
            </tr>

            <tr>
              <td>Shanfari& Partners Company LLC. </td>
              <td></td>
              <td>
                Maintenance/Engineering/ Construction/Contracting Company </td>
            </tr>
            <tr>
              <td>Al Nadha United LLC </td>
              <td></td>
              <td>Maintenance/Engineering/ Construction/Contracting Company </td>
            </tr>
            <tr>
              <td>Al Obaidani Group </td>
              <td></td>
              <td>Maintenance/Engineering/ Construction/Contracting Company </td>
            </tr>
            <tr>
              <td>
                Cement Marketing Co. LLC </td>
              <td></td>
              <td> </td>
            </tr>

        </tbody>
      </table>

    </div>
  </div>
</body>

</html>

Improve this answer

Comments

1

You can try using :empty and :after like the following way:

td:empty:after {
  content: '-';
  display: block;
  text-align: center;
}


table, th, td{
  border: 1px solid black;
  border-collapse: collapse;
}

td:empty:after {
  content: '-';
  display: block;
  text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12 col-sm-6">
  <div class="table-style-1">
      <div class="round-box">
        <img class="sppb-img-responsive img-responsive"
        src="<?= base_url('media/images/') ?>associates-flag-8.jpg"
        alt="">
      </div>
      <div class="head"><span>OUR MAJOR CLIENTS IN OMAN</span>

      </div>
    <table class="table table-bordered client-1">
      <thead>
        <tr>
          <th>COMPANY NAME</th>
          <th>CITY</th>
          <th>SERVICES</th>
        </tr>
      </thead>
      <tbody class="EMIRATES">
      <tr>
        <td>Dream Tourist Village </td>
        <td></td>
        <td>Hotel / Resort </td>
      </tr>
      <tr>
        <td>City Seasons Muscat </td>
        <td></td>
        <td>Hotel / Resort</td>
      </tr>
      <tr>
        <td>    
        Tawoos Industrial Services Company 
        LLC </td>
        <td></td>
        <td>Catering Company </td>
      </tr>
      <tr>
        <td>S.J. Abed & Al Sulaimi Catering Group 
        LLC </td>
        <td></td>
        <td>
        </td>
      </tr>
      <tr>
        <td>Ministry of Defence </td>
        <td></td>
        <td>Ministry of Defense</td>
      </tr>
      <tr>
        <td>The Sultan Special Force </td>
        <td></td>
        <td>Ministry of Defense</td>
      </tr>
      <tr>
        <td>Port Services Corporation SAOG </td>
        <td></td>
        <td>Port Operation </td>
      </tr>
      <tr>
        <td>Port of Salalah</td>
        <td></td>
        <td>Port Operation </td>
      </tr>
      <tr>
        <td> </td>
        <td></td>
        <td>Ready Made Garment 
        Factories </td>
      </tr>
      <tr>
        <td>    
        Al Buraimi Garments, Tailoring & 
        Embroidery L.L.C </td>
        <td></td>
        <td>Ready Made Garment 
        Factories </td>
      </tr>
      <tr>
        <td>Starbag Company. WLL </td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td>Shanfari& Partners Company LLC. </td>
        <td></td>
        <td>    
        Maintenance/Engineering/
        Construction/Contracting 
        Company </td>
      </tr>
      <tr>
        <td>Al Nadha United LLC </td>
        <td></td>
        <td>Maintenance/Engineering/
        Construction/Contracting 
        Company </td>
      </tr>
      <tr>
        <td>Al Obaidani Group </td>
        <td></td>
        <td>Maintenance/Engineering/
        Construction/Contracting 
        Company </td>
      </tr>
      <tr>
        <td>    
        Cement Marketing Co. LLC </td>
        <td></td>
        <td> </td>
      </tr>

      </tbody>
    </table>

  </div>
</div>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.