I have created a web application that requires both desktop and mobile views, utilizing Angular JS. Everything is functioning as expected except for the text alignment within tables. I attempted using <td align="left">, but it did not produce any changes.
Here's the code snippet of the table:
<tr style="height: 35px; text-align: left" class="{{event.holiday ||event.sunday ? 'vacationBgColor' : 'nonVacationBgColor'}}" data-ng-repeat="event in week.eventsOfPersonByDateList">
<td width="10%">{{ event.dayDate }}</td>
<td colspan="7">
<table style="width: 100%;">
<tbody>
<tr data-ng-repeat="day in event.eventDataList" style="height: 35px; text-align: left">
<td width="10%">{{ day.tCode }}</td>
<td width="10%">{{ day.beginTime === '00:00' ? ' ': day.beginTime }}</td>
<td width="10%">{{ day.endTime === '00:00' ? ' ' :day.endTime }}</td>
<td width="10%">{{ day.tsCode }}</td>
<td width="12%">{{ day.scUnitCode }}</td>
<td width="10%">{{day.sourceCode }}</td>
</tr>
</tbody>
</table>
</td>
</tr>
Could there be something fundamental that I am overlooking? Is there something else that needs to be added? I would greatly appreciate your assistance.