Align Fields Horizontally in table

Posted by tjon.kim - Jul 5 ’15 at 11:08

Hi,

 

We are trying to create a table in a SharePoint list with all the field names collapsed. Everything is in one table, but the date fields seem to be slightly lower (not in line) with the other fields in the table:

 

I tried to use css to

1) Push the other boxes down slightly (using the margin property in css)

2) Maintain the date fields at 0 margin.

 

This seems to have worked (picture attached) but then the read only fields do not seem to follow the css I put in (I tried putting extra lines of css just for the .cost class without specifying input type but that does not seem to work either). Here is my CSS:

 

.cost input[type="text"], .cost select{

width:125px;

margin-top:4px;

}

 

.date input[type="text"] {

margin-top:0px;

}

What can I do to get everything aligned? Thanks in advance.

• 

  rostislav

  Moderator

  Member for: 8 years 4 months 28 days
  #1 by rostislav Jul 6 ’15 at 10:40

  Please define a css class for each of your date fields and paste the following css into the css editor (substituting 'className' for your class name)

  .className .ms-dtinput
  {
          vertical-align: top;
  }
  

  link flag
• 

  rostislav

  Moderator

  Member for: 8 years 4 months 28 days
  #2 by rostislav Jul 6 ’15 at 10:41

  The message was removed by a forum moderator.

  link
• tjon.kim

  Member

  Member for: 8 years 5 months 16 days
  #3 by tjon.kim Jul 15 ’15 at 08:58

  [#1]:

  Thanks that works

  link flag
• tjon.kim

  Member

  Member for: 8 years 5 months 16 days
  #4 by tjon.kim Jul 15 ’15 at 08:58

  [#1]:

  Thanks that works

  link flag
• Deeann01

  Member

  Member for: 4 months 1 day
  #5 by Deeann01 Sep 13 ’23 at 10:56
  Hair regrowth after a hair transplant progresses through distinct phases. Initial recovery, lasting days to weeks, entails redness, swelling, and scabbing at the transplanted area. Adhering to post-operative care instructions is essential for successful Hair Regrowth After a Hair Transplant. Shock loss, occurring in 2 to 6 weeks, may cause temporary hair shedding as new follicles enter a resting phase. Initial hair growth begins at 3 to 6 months, initially appearing fine but strengthening over time. Visible growth emerges at 6 to 9 months, leading to increased hair density in the transplanted area.
  link flag
• Deeann01

  Member

  Member for: 4 months 1 day
  #6 by Deeann01 Sep 30 ’23 at 02:18

  When creating tables, it's essential to align fields horizontally for a neat and organized presentation of data. Proper alignment ensures that information is easily readable and aesthetically pleasing. Whether you're designing a spreadsheet, report, or even planning a canada virtual magic show ticket sales table, aligning fields improves the overall look and functionality of your document. Consistency in alignment enhances clarity, making it simpler for viewers to comprehend the content. So, remember to align fields horizontally to enhance the visual appeal and effectiveness of your tables, whether it's for business reports or event management, such as the Canada virtual magic show.

  link flag

Show more messages