Dans mon cas, j'ai une table de données de 1000 lignes, donc je ne peux pas vérifier que chaque td est vide ou pas en moi-même. je décide donc d'écrire un script pour le style de données de table vide pour text-align: center et content: '-'. Je n'ai aucune idée de la façon de le faire, alors aidez-moi les gars.

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>

Chaque td vide doit être au centre et le contenu css est "-".

3
Naveen007 9 mai 2020 à 14:02

4 réponses

Vous pouvez essayer d'utiliser :empty et :after de la manière suivante:

td:empty:after {
  content: '-';
  display: block;
  width: 100%;
  text-align: center;
}
table, th, td{
  border: 1px solid black;
  border-collapse: collapse;
}

td:empty:after {
  content: '-';
  display: block;
  width: 100%;
  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>
0
Mamun 9 mai 2020 à 11:23

Voici une solution si vous souhaitez utiliser JS, il peut l'utiliser pour vérifier n'importe quelle condition de votre table.

Bon codage.

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>
0
OmmiZone 9 mai 2020 à 11:34

Vous pouvez également utiliser jQuery pour y parvenir. Exemple:

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

Et comme style:

.text-aligned-class {
    text-align: center;
}
0
Ehsan Mahmud 9 mai 2020 à 11:13

:empty est utilisé pour les contenus vides. Vous pouvez donc l'utiliser avec votre css

td:empty{
   text-align:center;
}
td:empty:before{
  content:"-"
}
1
pc_coder 9 mai 2020 à 11:20