How to pad cell content to center

How to pad cell content to center

If I have a fixed length text then I can easily center it for example

However, lets say there are data with variable length,

Centering the content of Nickname will affect readability. Is there a way to pad the content and centering it base on the longest length?

      
         ...content      
    

The value "30%" is just rough estimate for nickname.

However this 30 percent will changed if the column is expecting a longer data. What is a good way to programatically determine this value that I put as "30" ?

Update, centering text is not what I am looking for. I want to center text AND left align, centering text alone will give me

Visual representation of what I want

Answer by Shailesh for How to pad cell content to center

you can try by mentioning pixels size

      
         ...content      
    

Answer by Tympaaz for How to pad cell content to center

Update

Technically this answer is correct but we are unable to see it visually so according to me the best way to do this is to add same left and right padding to both and and remove text-align:center from . This is just my opinion. We will wait and see what others think about it. :)

---

Instead of adding padding to one side you need to add it both the sides.

table tr td{        padding:5px 15%;  }  

I have created a simple example.

table{    width:200px;  }    table tr th{    background:#ccc;    text-align:left;    padding:5px 15%;  }    table tr td{    padding:5px 15%;    background:#eee;  }

  
    
Nickname
  
    
    
One
  
  
    
Big Name
  
  
    
A Very Big Name
  
    
    
This is a very big name
  
  

Answer by eronax59 for How to pad cell content to center

Try this,

td{    padding:5px;    text-align:center;  }  

Answer by Shailesh for How to pad cell content to center

so to make it responsive you should use bootstrap 3

try this you will definitely get your answer bootstrap tables

and there classes

      A      B      C      D    

Answer by slashsharp for How to pad cell content to center

You need javascript to determine the width of the content and the table data width.

 var td = document.querySelectorAll('td > div');      var width = 0;      var clientWidth = 0;      // determine the width      [].forEach.call(td, function(e) {        clientWidth = e.parentNode.clientWidth; // the width is the same for all td's        if (e.clientWidth > width) {          width = e.clientWidth;        }      });      // set the padding      [].forEach.call(td, function(e) {        e.style.paddingLeft = (clientWidth - width) / 2 + 'px';        e.style.paddingRight = (clientWidth - width) / 2 + 'px';      });    

    table {        border-collapse: collapse;          }      th {        text-align: center;      }      th, td {        border: 1px solid #000;      }      td > div {        display: inline-block; /* set this because we want to calculate the width, block element has 100% */        padding: 10px 0;      }

  
      
        
Nickname
      
      
        
Data 1 Data 1Data 1Data 1
      
      
        
Data 2
      
      
        
Data 3
      
      
        
Data 4
      
      
        
Data 5
      
      
        
Data 6
      
      
        
Data 7
      
      
        
Data 8
      
    

Change the hardcoded table width to see the effect.

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72